so the underline is the width of the text itself */ .chapter .chapter-label { display: table; margin: 0 auto 14px; text-align: center; border-bottom: 1px solid var(--rule); padding-bottom: 7px; } /* Rotating the bear inflated his bounding box from 252px to 414px and dropped him straight across the copy. Much smaller, and pulled back to the edge so the head and the raised arm are what come in, over the run between the two sections rather than over the paragraphs. */ @media (min-width: 901px) { .obj--bear { width: 172px; right: -62px; bottom: -18px; transform: rotate(-38deg); } } @media (max-width: 900px) { .obj--bear { width: 148px; right: -48px; bottom: -14px; transform: rotate(-38deg); } } /* Final tuck. The note goes back into the gap the layout already has (120px on a phone, 148px on desktop) rather than a gap I built for it, sized to fit and cropped on the right so it reads as tucked under the page. The print shrinks again and drops to straddle the section boundary. */ @media (min-width: 901px) { .obj--walk { width: 140px; left: -78px; bottom: -66px; } .obj--grad { top: 6px; } .obj--hand { width: 208px; right: -30px; bottom: -74px; } } @media (max-width: 900px) { .obj--walk { width: 118px; left: -66px; bottom: -60px; } .obj--grad { top: 8px; } .obj--hand { width: 176px; right: -24px; bottom: -68px; } } /* the bear's rotated box was reaching 20px into the album's column; the story column paints above the album, so nothing may cross that line */ @media (min-width: 901px) { .obj--bear { width: 156px; right: -44px; } } /* ============================================ PLACEMENT PASS 3 (measured) == Sized against the actual anchors on a 375px screen: bear - centred on the 64px run between "…add another." and "WHY I MADE IT" walk - inside the 141px band from the bottom of "college." to the top of "She", and left of where "The" begins (x=41) grad - inside the 72px band from the bottom of "MEMORIAL" to the top of "instead of" The vertical band is the binding constraint on both photographs, which is what forces them this small. ========================================================================== */ @media (max-width: 900px) { .obj--bear { width: 124px; left: auto; right: 8px; top: auto; bottom: -59px; transform: rotate(-22deg); } .obj--walk { width: 70px; left: -41px; right: auto; top: auto; bottom: -61px; transform: rotate(6deg); } .obj--grad { width: 56px; left: auto; right: 6px; top: 34px; bottom: auto; transform: rotate(6deg); } } @media (min-width: 901px) { .obj--bear { width: 138px; right: 22px; bottom: -56px; transform: rotate(-22deg); } .obj--walk { width: 82px; left: -44px; bottom: -66px; transform: rotate(6deg); } .obj--grad { width: 68px; right: 14px; top: 30px; transform: rotate(6deg); } } /* measured: the print was overlapping "The" by 5px and the portrait was only 1px clear of "instead of" */ @media (max-width: 900px) { .obj--walk { left: -50px; } .obj--grad { top: 28px; } } /* ============================================ PLACEMENT PASS 4 (measured) == Measured every rendered line of text on a 375px screen. Key numbers: "Marina" bottom 706 -> "for" top 821 = 115px band "college." bottom 1719 -> "She" top 1860 = 141px band label line 1 ends x345, line 2 x118-257, and its rule runs the FULL column width; h2 line 1 ends x302, line 2 x211. So the corridor right of x~305 is clear all the way down past the h2 - that is where the portrait goes, cropping off the right edge. ========================================================================== */ @media (max-width: 900px) { /* Bear: sits in the 115px band between "Marina" and "for", to the right of the centred "WHY I MADE IT" (which ends at x261). Whole bear, no crop, touching nothing. 115px of height is what caps it at 74px wide. */ .obj--bear { width: 74px; left: auto; right: 27px; top: auto; bottom: -45px; transform: rotate(-4deg); } /* Portrait: down the clear right-hand corridor rather than squeezed between two wrapped lines - nearly twice the size it was, cropping off the right edge, and clear of every word. */ .obj--grad { width: 100px; left: auto; right: -35px; top: 30px; bottom: auto; transform: rotate(5deg); } /* Print: rotated to the right as asked and scooted in, so ~99px of it shows instead of 35px. Only its top and bottom edges pass under a line of text - the people in it are clear. */ .obj--walk { width: 90px; left: -20px; right: auto; top: auto; bottom: -85px; transform: rotate(12deg); } /* the quote was losing "your" off the right edge again */ .obj--hand { right: 6px; } } /* ============================================ PLACEMENT PASS 5 (measured) == The only slot near "her name" that clears every word is the 71px full-width run between "college." (ends y1719) and "THE LESLIE MORMAN" (starts y1790). A portrait-format print cannot be both tall enough to see and under 71px - so it lies at a steep angle, the way a print actually sits in a box. That turns 71px of height into 83px of width across, all of it clear. ========================================================================== */ @media (max-width: 900px) { .obj--walk { width: 43px; left: 40px; right: auto; top: auto; bottom: -4px; transform: rotate(62deg); } /* Bear comes out of the right edge: head, left arm and left leg in frame, the rest of him off-screen. */ .obj--bear { width: 112px; left: auto; right: -31px; top: auto; bottom: -36px; transform: rotate(-6deg); } } /* print was 1px into "The"; lift it clear */ @media (max-width: 900px) { .obj--walk { bottom: -1px; } } /* Bear dropped so it clears the paragraph above entirely. It cannot also clear the headline below: the run between "Marina" and "for" is 115px and a bear big enough to crop at the edge is ~156px. This is the smallest contact available - the tail of the headline, at its right end. */ @media (max-width: 900px) { .obj--bear { width: 100px; right: -23px; bottom: -85px; transform: rotate(-6deg); } } /* the band is 71px and the tilted print was exactly 71px, so either end grazed. A hair smaller buys clearance at both. */ @media (max-width: 900px) { .obj--walk { width: 40px; bottom: -3px; } } /* ================================================ GIVE THE PAGE MARGINS ==== The root cause of every fight over placement: the story column ran the full width of the page, so a background object had nowhere to be except under a paragraph or in the thin run between two sections. Pulling the measure in gives the objects a gutter to live in on both sides. It also shortens the line - 347px at 16px was a wide measure for a phone; 262px is about 36 characters, which reads better anyway. ========================================================================== */ .chapter .col { max-width: 430px; margin-inline: auto; } @media (max-width: 900px) { .chapter .col { max-width: 262px; } } /* ====================================== PLACEMENT, WITH MARGINS TO USE ===== Now that the copy runs 57..319 on a phone (and 91..521 on desktop), the objects live in the gutters and crop off the screen edge. They are no longer squeezed into the runs between sections, so they can be a real size again and the vertical position is free. ========================================================================== */ @media (min-width: 901px) { .obj--bear { width: 168px; left: auto; right: -18px; top: auto; bottom: -60px; transform: rotate(-9deg); } .obj--walk { width: 156px; left: -62px; right: auto; top: auto; bottom: -40px; transform: rotate(8deg); } .obj--grad { width: 150px; left: auto; right: -26px; top: 54px; bottom: auto; transform: rotate(-7deg); } .obj--glasses { width: 146px; left: -44px; right: auto; top: auto; bottom: 30px; transform: rotate(12deg); } .obj--hand { width: 268px; left: auto; right: 14px; top: auto; bottom: -58px; transform: rotate(-3deg); } } @media (max-width: 900px) { /* bear: right gutter, half of him off the edge */ .obj--bear { width: 132px; left: auto; right: -34px; top: auto; bottom: -74px; transform: rotate(-9deg); } /* the print: left gutter, big enough to see the three of you, running off the left edge with the date stamp on the visible side */ .obj--walk { width: 138px; left: -58px; right: auto; top: auto; bottom: -30px; transform: rotate(9deg); } /* her portrait: right gutter of the scholarship section */ .obj--grad { width: 128px; left: auto; right: -30px; top: 48px; bottom: auto; transform: rotate(-8deg); } /* glasses: left gutter, low in the section */ .obj--glasses { width: 126px; left: -38px; right: auto; top: auto; bottom: 18px; transform: rotate(13deg); } /* her note: across the run before the CTA, kept whole */ .obj--hand { width: 228px; left: auto; right: 6px; top: auto; bottom: -54px; transform: rotate(-3deg); } } /* pulled further into the gutters so what little overlap remains falls on the ragged ends of lines rather than across words */ @media (min-width: 901px) { .obj--bear { right: -52px; } .obj--walk { left: -92px; } .obj--grad { right: -58px; } .obj--glasses { left: -76px; } .obj--hand { bottom: -104px; } } @media (max-width: 900px) { .obj--bear { right: -64px; } .obj--walk { left: -84px; } .obj--grad { right: -58px; } .obj--glasses { left: -68px; } .obj--hand { bottom: -108px; } } /* the note overshot into the CTA copy */ @media (min-width: 901px) { .obj--hand { bottom: -30px; } } @media (max-width: 900px) { .obj--hand { bottom: -34px; } } /* The note is the one object meant to be READ, so it stays big. It sits in the 120px run before the CTA and rides up over the short closing line ("September 14.") where the right-hand side of that row is empty. */ @media (min-width: 901px) { .obj--hand { width: 250px; right: 16px; bottom: -44px; } } @media (max-width: 900px) { .obj--hand { width: 200px; right: 10px; bottom: -48px; } } /* One exception to "no manufactured space": her handwriting. It is the only object on the page that is meant to be READ, and it needs 160px where the run before the CTA gives 120px. Unlike the earlier version of this, the note sits over to the right rather than centred in a clearing, so it reads as tucked into the corner rather than staged. */ .g-story > section.chapter:nth-of-type(4) { padding-bottom: 118px; } @media (min-width: 901px) { .g-story > section.chapter:nth-of-type(4) { padding-bottom: 132px; } } /* desktop: the note is 207px tall against a 188px run, so it comes down a little; and the bear pulls further into the gutter */ @media (min-width: 901px) { .obj--hand { width: 226px; bottom: -60px; } .obj--bear { right: -96px; } } /* ============================================== MOBILE PLACEMENT, PASS 6 === Measured on 375px. Gap between "send kids to college." (ends y2095) and the scholarship title (starts y2159) is 64px; "PAGE ONE'S GOAL" is centred at x102-273, leaving the left of that row open. ========================================================================== */ @media (max-width: 900px) { /* print at two thirds - smaller, so a much larger share of it clears the edge - and dropped so it centres on the run above the scholarship title instead of sitting halfway up the paragraph */ .obj--walk { width: 92px; left: -22px; bottom: -82px; transform: rotate(9deg); } /* her portrait eased left */ .obj--grad { right: -38px; } /* glasses moved down beside "PAGE ONE'S GOAL", coming in from the left and clear of the label, which starts at x102 */ .obj--glasses { width: 126px; left: -50px; bottom: -73px; transform: rotate(13deg); } /* The note at two thirds. It no longer needs a widened run to fit, so that extra padding comes back off - which is what was making it read as its own section. */ .g-story > section.chapter:nth-of-type(4) { padding-bottom: clamp(40px, 6vh, 64px); } .obj--hand { width: 139px; right: 10px; bottom: -30px; transform: rotate(-3deg); } } /* trims: the portrait went a touch too far left, and the glasses were reaching into the goal headline */ @media (max-width: 900px) { .obj--grad { right: -46px; } .obj--glasses { left: -58px; } } /* The measure went a little too tight. Widened back out - 292px is ~36 characters on a phone rather than 32 - and the objects step out with it so they keep the same relationship to the edge of the text. */ .chapter .col { max-width: 462px; } @media (max-width: 900px) { .chapter .col { max-width: 292px; } } @media (min-width: 901px) { .obj--bear { right: -112px; } .obj--walk { left: -108px; } .obj--grad { right: -74px; } .obj--glasses { left: -92px; } .obj--hand { right: 12px; } } @media (max-width: 900px) { .obj--bear { right: -78px; } .obj--walk { left: -36px; } .obj--grad { right: -60px; } .obj--glasses { left: -72px; } .obj--hand { right: 6px; } } /* evening them out: the bear had stepped further out than it needed, the portrait not quite far enough */ @media (max-width: 900px) { .obj--bear { right: -60px; } .obj--grad { right: -68px; } } /* ---- mobile pass 7 ------------------------------------------------------ */ @media (max-width: 900px) { /* print at half - nearly all of it now clears the edge */ .obj--walk { width: 46px; left: -4px; bottom: -40px; } /* portrait a third smaller and further left, so her face is in frame */ .obj--grad { width: 85px; right: -14px; } /* glasses further right */ .obj--glasses { left: -46px; } /* the note drops into the clear run under it */ .obj--hand { bottom: -62px; } } /* trims: glasses had come too far in, and the note overshot into the CTA */ @media (max-width: 900px) { .obj--glasses { left: -60px; } .obj--hand { bottom: -53px; } } /* the note was flush against the CTA heading; 3px of air at both ends */ @media (max-width: 900px) { .obj--hand { bottom: -50px; } } /* wider again - 310px is ~38 characters on a phone - and the print up 35% */ .chapter .col { max-width: 486px; } @media (max-width: 900px) { .chapter .col { max-width: 310px; } .obj--walk { width: 62px; left: -8px; } .obj--bear { right: -69px; } .obj--grad { right: -23px; } .obj--glasses { left: -69px; } } /* the narrower gutter pushed the bear too far over the headline; the portrait had room to come back in */ @media (max-width: 900px) { .obj--bear { right: -84px; } .obj--grad { right: -14px; } } /* ---- mobile pass 8 ------------------------------------------------------ The "Last year, we were able to give three graduating seniors..." paragraph runs y2242-2322 with lines ending at x302, x275 and x214 - so its right side is open. That is where the portrait goes. ------------------------------------------------------------------------ */ @media (max-width: 900px) { .obj--bear { right: -46px; } .obj--walk { width: 68px; bottom: -62px; } .obj--grad { top: 296px; right: -12px; } .obj--glasses { left: -48px; } .obj--hand { bottom: -80px; } } /* middle ground: at a 33px gutter, visible width = 33 + however far the object reaches over the text, so 62% visible cost 64px of overlap. These sit at roughly 45px over, which keeps them off the body of the lines. */ @media (max-width: 900px) { .obj--bear { right: -64px; } .obj--glasses { left: -64px; } } /* The depth layer clips its own objects, and Chrome reports no overflow at all - but Safari still let the page be dragged sideways. Belt and braces: clip the root as well, so the viewport itself has nothing to pan to. `clip` rather than `hidden` because hidden on the root can turn body into the scroll container and kill the sticky album. */ html { overflow-x: clip; } body { overflow-x: clip; max-width: 100%; } @media (max-width: 900px) { .obj--glasses { left: -52px; } /* a bit more of them showing */ .obj--hand { bottom: -66px; } /* back up a little */ } /* ================================================== DESKTOP: LET THEM RUN == Desktop only. Nothing in here touches the phone layout. The depth layer used to clip 18px past the story column, which is what was slicing the objects off on their right. Now it runs to the far edge of the screen, so each object shows whole - and the album is lifted above the field so anything that reaches that far simply passes behind the book, which is the correct depth relationship anyway. ========================================================================== */ @media (min-width: 901px) { .depth { right: -100vw; } /* the book sits ON TOP of the field rather than under it */ .g-album { z-index: 1; } /* the measure eases right a hair, opening the left margin */ .chapter .col { margin-left: 48px; margin-right: auto; } } /* Those three were positioned from the depth layer's RIGHT edge, which just moved a whole viewport over - so they have to be anchored from the left instead. Text now ends at x570 and the album column starts at 636, so they begin just past the copy and run on behind the book. */ @media (min-width: 901px) { .obj--bear { left: 566px; right: auto; } .obj--grad { left: 566px; right: auto; } .obj--hand { left: 392px; right: auto; } } /* An object stays out of the page until its pixels have arrived, so the rectangular fallback shadow never gets a frame to paint in. No fade - it simply is not there, then it is. */ .obj:not(.is-ready) { visibility: hidden; filter: none; } /* Desktop nudges. The run between "…I'll add another." (ends y327) and the "WHY I MADE IT" label (starts y419) is 92px, centred on y373 - the bear drops so his arm and shoulder land in it rather than his legs. */ @media (min-width: 901px) { .obj--bear { left: 536px; bottom: -110px; } .obj--grad { left: 522px; } .obj--hand { left: 444px; } } /* The book comes down about 6% on desktop only - enough that more of her face clears the page edge when the album is open, without changing the object's presence. Phones keep their own --page-w, which is set from the viewport and is untouched by this. */ @media (min-width: 901px) { :root { --page-w: clamp(240px, 23vw, 327px); } .obj--bear { bottom: -168px; } } /* -168 dropped him far enough that the gap landed on his head; -145 puts it on the upper arm and shoulder */ @media (min-width: 901px) { .obj--bear { bottom: -145px; } } /* Glasses down beside "PAGE ONE'S GOAL". That label sits centred at x241-413, so the whole left of its row is open - the glasses drop into it and still run off the left edge. */ @media (min-width: 901px) { .obj--glasses { left: -38px; bottom: -43px; } } /* "amount it can contribute…" ends at y1633 and the glasses topped out at 1624 - down far enough to clear that last line */ @media (min-width: 901px) { .obj--glasses { bottom: -62px; } } /* The copy ends 570px from the depth layer's left edge at every width (the measure is fixed at 486 with a 48px indent), so anything left of 570 sits ON the text no matter how wide the window is. The portrait starts past it. */ @media (min-width: 901px) { .obj--grad { left: 580px; } } /* ===================================================== SHADOWS: REMOVED ==== Safari was drawing these objects' drop-shadow as a rectangle - the layer's bounding box rather than the object's silhouette. Two attempts at timing it (waiting for load, then for decode) did not help, which means it is not a timing problem: the objects are provably hidden until decoded, so whatever paints the box paints after that. It is Safari rasterising drop-shadow on a rotated, composited element, and it is not fixable from here. A filter that cannot run cannot fall back to a rectangle, so the filter is gone. The objects now sit flat on the paper. Baking real shadows into the image files would bring the depth back and could not produce this bug - but it means re-exporting all five with padding for the blur and re-tuning every position, because a padded canvas moves each object's edges. ========================================================================== */ .obj--far, .obj--mid, .obj--near { filter: none; } /* ==================================================== REQUEST THE LINK ===== Desktop only. The button sits under the album; the dialog it opens holds the real signup card, moved there and moved back. ========================================================================== */ .request-link { display: none; } @media (min-width: 901px) { .request-link { display: block; margin: clamp(26px, 3.4vh, 40px) auto 0; padding: 11px 26px 12px; border: 1px solid var(--ink); border-radius: 2px; background: none; cursor: pointer; font-family: var(--text), system-ui, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); transition: background-color .18s ease, color .18s ease; } .request-link:hover { background: var(--ink); color: var(--canvas); } .request-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } } body.has-dialog { overflow: hidden; } .req-dialog { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 4vmin; background: rgba(38, 32, 27, .62); opacity: 0; transition: opacity .2s ease; } /* .req-dialog sets display:flex, which outranks the browser's [hidden] rule - the same trap the zoom overlay fell into, so say it explicitly */ .req-dialog[hidden] { display: none; } .req-dialog.is-open { opacity: 1; } .req-dialog__sheet { position: relative; width: min(440px, 100%); max-height: 92vh; overflow-y: auto; background: var(--canvas); background-image: var(--grain); border-radius: 4px; box-shadow: 0 30px 70px rgba(0, 0, 0, .3); padding: 34px 34px 30px; transform: translateY(10px); transition: transform .22s cubic-bezier(.22,.75,.2,1); } .req-dialog.is-open .req-dialog__sheet { transform: translateY(0); } /* the dialog carries only a short title and the fields */ .req-dialog__title { font-family: var(--display), Georgia, serif; font-size: 1.35rem; line-height: 1.2; color: var(--ink); margin: 0 0 20px; } .req-dialog__sheet .presave-form { margin: 0; } .req-dialog__sheet .lede { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; } .req-dialog__close { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; line-height: 1; font-size: 26px; color: var(--ink-2); background: none; border: 0; cursor: pointer; } .req-dialog__close:hover { color: var(--ink); } .req-dialog__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .req-dialog, .req-dialog__sheet { transition: none; } } /* ============================ AFTER THE MERGE: WHERE HER NOTE GOES ========= Joining Page One's Goal to the signup closed the 120px run her handwriting used to sit in - it is 15px now. Desktop has somewhere better: the clear corridor right of the copy, alongside the goal paragraphs, touching nothing. Phones have no such gutter, so there it sits in the run at the foot of the section, after the form - a closing note rather than a transition. ========================================================================== */ @media (min-width: 901px) { .obj--hand { left: 582px; right: auto; top: 132px; bottom: auto; } /* the padding that used to hold a clear band for the note now just adds a gap after the form */ .g-story > section.chapter:nth-of-type(4) { padding-bottom: clamp(52px, 8vh, 92px); } } @media (max-width: 900px) { .obj--hand { right: 6px; left: auto; top: auto; bottom: 8px; } } /* A quiet label over the tally, in the same small tracked caps as the section labels. No bar, no widget - the number stays the loud part. */ .card .count .count-label { display: block; font-family: var(--text), system-ui, sans-serif; font-optical-sizing: none; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 7px; } /* Her note beside the tally. The count block runs y3217-3282 and its text stops around x150, so the right of that row is open. NOTE: this is anchored in px from the top of the section, so it needs re-measuring if the copy above it changes length. */ @media (max-width: 900px) { .obj--hand { top: 604px; bottom: auto; right: 8px; left: auto; } } /* Desktop: her note beside the tally too. The count block runs y2232-2307 and its text stops around x204, so everything right of that is open all the way to the album column at 636. Sized down so it fits the 117px band between the lede and "How should I send it?". */ @media (min-width: 901px) { .obj--hand { width: 200px; left: 318px; right: auto; top: 464px; bottom: auto; } } /* it was crossing "I'll send you the purchase link…", which runs the full measure - drop it below that line */ @media (min-width: 901px) { .obj--hand { top: 496px; } } /* into the gap between the copy and the book - the text ends at 570 and the book's left edge is 667, so the note can sit across that boundary */ @media (min-width: 901px) { .obj--hand { left: 392px; } } /* --- handwritten note: anchor to the story/album column boundary --- */ @media (min-width: 901px) { .obj--hand { /* .depth runs 100vw past its chapter, so (100% - 100vw) lands on the chapter's right edge -- the grid line the book sits beside. Offsetting from there keeps the note tucked just left of the open spread at any window width. */ left: calc(100% - 100vw - 140px); right: auto; } } /* narrow desktop (901-1150px): only ~50px of gutter separates the story column from the book, so there is no room beside the count. The note drops to the section's tail instead, still riding the column edge. */ @media (min-width: 901px) and (max-width: 1150px) { .obj--hand { width: 104px; top: auto; bottom: 6px; left: calc(100% - 100vw - 30px); } } /* =========================================================================== PAPER VARIATION — different pieces of paper inside the same album The four story sections were running the same editorial rhythm on the same cream, so the page read as one long document instead of a book you turn through. Each section now behaves like a different physical thing that got put on the page. No cards: nothing here gets a radius, an all-round border, a blur or a "container" look, and no artifact loses its colour. What it is untouched. The plain page the others are measured against. Why I made it his own voice up top; the closing thought tucked in on a warmer slip of paper, laid down a half-degree crooked. The scholarship archival. Double-ruled file label, and the one hard fact set as a record strip between hairlines. Page one's goal the break from story into action - the goal and the CTA move onto a pale blue-grey sheet of stationery. ========================================================================== */ :root { --paper-warm: #f1e9d9; /* a slip tucked into the album */ /* The sheet is the album's own page stock - the same warm cream the book's leaves are printed on - so it reads as paper from this album rather than a panel from a website. Barely off the canvas; the shadow does the separating, not the colour. */ --paper-sheet: #f7f2e6; --paper-sheet-edge: rgba(64,52,47,.13); } /* ------------------------------------------------- why I made it: intimate */ /* His voice, not the page's. Serif at reading size sits between the display heading and the body grotesk, so it reads as spoken rather than published. */ .chapter--why h2 + p { font-family: var(--display); font-optical-sizing: auto; font-weight: 400; font-size: 18.5px; line-height: 1.6; letter-spacing: -0.004em; color: var(--ink); max-width: 47ch; } /* The closing thought is the one that hands off to the scholarship, so it comes in on its own slip of paper rather than as a fourth paragraph. */ .chapter--why .tuck { position: relative; max-width: 46ch; margin: 32px 0 0; padding: 22px 26px 24px; background-color: var(--paper-warm); background-image: var(--grain); color: rgba(64,52,47,.82); box-shadow: 0 1px 1px rgba(42,32,28,.10), 0 10px 22px rgba(42,32,28,.11); transform: rotate(-0.5deg); } /* -------------------------------------------- the scholarship: documentary */ /* A file label, not a headline. */ .chapter--archive .chapter-label { border-bottom: 3px double var(--rule); padding-bottom: 8px; } /* The section's one piece of hard record, ruled off like a ledger entry. Hairlines top and bottom only - a strip, never a box. */ .chapter--archive .record { margin: 26px 0 22px; padding: 15px 0 16px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.56; letter-spacing: .004em; color: var(--ink); max-width: 46ch; } /* ------------------------------------------ page one's goal: the stationery */ /* The one real break in the page: the story stops and the ask begins, so the ask moves onto a different sheet of paper. It bleeds past the text measure so it reads as a sheet laid down, not as a panel drawn around the text. */ .stationery { position: relative; margin: 32px -26px 0; padding: 30px 26px 30px; background-color: var(--paper-sheet); background-image: var(--grain); border-top: 1px solid var(--paper-sheet-edge); border-bottom: 1px solid var(--paper-sheet-edge); box-shadow: 0 1px 2px rgba(42,32,28,.07), 0 14px 30px rgba(42,32,28,.09); } .stationery .goal-math { margin-top: 0; border-left-color: rgba(93,113,125,.5); } .stationery .stationery-out { margin: 20px 0 0; } .chapter--goal .stationery p { color: var(--ink-2); } .chapter--goal .stationery .goal-math p { color: var(--ink); } /* The CTA stops being a card and becomes the lower half of the same sheet. */ .stationery .card { background: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid var(--paper-sheet-edge); } /* Both inserts carry their own paper, so the glyph halo that keeps copy legible over the artifacts is not needed and would tint the wrong colour. */ .chapter--why .tuck, .stationery .chapter-label, .stationery h2, .stationery p, .stationery .goal-math { text-shadow: none; } @media (max-width: 900px) { .chapter--why h2 + p { font-size: 17.5px; } .chapter--why .tuck { margin-top: 26px; padding: 19px 20px 20px; } .chapter--archive .record { margin: 22px 0 20px; font-size: 15px; } .stationery { margin: 28px -14px 0; padding: 24px 14px 26px; } .stationery .card { margin-top: 22px; padding: 20px 0 0; } } /* Her note lies ON the stationery, not under it. The artifact layer normally sits behind the copy, but this sheet is opaque and was swallowing half the handwriting. .depth is pointer-events:none, so the form stays clickable. */ .chapter--goal .depth { z-index: 3; } /* =========================================================================== PAGE ONE'S GOAL — the ask, compressed The signup had grown into a conversion funnel: a second headline, a lede repeating the button, a maths callout repeating the headline, a labelled choice, a boxed consent panel and a two-line share section, each divided off from the last. It out-weighed the album. It is now the bottom of one section: tally, one line of ask, the controls, the legal line small, and a single line of sharing. No inner dividers, no second visual break, and a narrow column on desktop so it reads as a mechanism on the page rather than a panel bolted to the end of it. ========================================================================== */ .chapter--goal .stationery { max-width: 430px; padding: 26px 26px 26px; } /* the streaming clarification, demoted to an aside */ .chapter--goal .aside { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); max-width: 44ch; } /* no rule, no gap, no second subsection - the ask just follows the copy */ .chapter--goal .stationery .card { border-top: 0; margin: 22px 0 0; padding: 0; } /* the tally leads, and stays the loud part */ .chapter--goal .card .count { margin: 0 0 8px; font-size: 1.75rem; line-height: 1.1; } .chapter--goal .card .count .count-label { display: inline; margin: 0 0 0 9px; font-size: 10.5px; vertical-align: 2px; } /* the ask is a line, not a headline */ .chapter--goal .card h2 { font-family: var(--text); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.35; color: var(--ink); margin: 0 0 14px; } /* controls sized to the mechanism, not to the measure */ .chapter--goal .choice, .chapter--goal .field, .chapter--goal .field input, .chapter--goal .btn { max-width: 330px; } .chapter--goal .choice { margin: 0 0 10px; } .chapter--goal .field { margin: 0 0 10px; } .chapter--goal .btn { width: 100%; min-width: 0; margin-top: 12px; } /* required consent copy, kept in full and set as legal type */ .chapter--goal .consent { background: none; border-radius: 0; padding: 0; margin: 12px 0 0; gap: 9px; max-width: 360px; } .chapter--goal .consent input[type=checkbox] { width: 14px; height: 14px; } .chapter--goal .consent label { font-size: 10.5px; line-height: 1.5; /* Subordinate by size, not by fading it out - this is the TCPA consent the toll-free registration was filed on, so it has to stay legible. */ color: var(--ink-2); } /* one line of sharing, no divider */ .chapter--goal .share-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 20px 0 0; padding: 0; border-top: 0; } .chapter--goal .share-lede { flex: 0 0 100%; margin: 0; font-size: 13px; color: var(--ink-3); } .chapter--goal .share-block .share-link { font-size: 13px; } /* the confirmation is a moment, so it keeps its voice */ .chapter--goal .card.is-confirmed h2 { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -0.018em; margin: 0 0 10px; } .chapter--goal .card.is-confirmed .lede { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 12px; max-width: 42ch; } body.is-released .chapter--goal .card h2 { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -0.018em; } @media (max-width: 900px) { .chapter--goal .stationery { max-width: none; padding: 22px 14px 22px; } .chapter--goal .choice, .chapter--goal .field, .chapter--goal .field input, .chapter--goal .btn, .chapter--goal .consent { max-width: none; } .chapter--goal .card .count { font-size: 1.6rem; } } /* Fallback only. The note's real position is measured in marina.js; this is where it parks if that never runs, and it must not land on the form. */ @media (max-width: 900px) { .chapter--goal .obj--hand { width: 128px; top: auto; bottom: -34px; right: 8px; left: auto; } } /* Only shown when both the Supabase write and the Netlify fallback fail. */ .form-error { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: #8a3d33; } /* The share actions inside a dialog sheet. The page's own spacing rules are scoped to .chapter--goal, and the block either is built fresh in the sheet or gets moved into it on confirm - either way it lands outside that scope and the two buttons end up touching. */ .req-dialog .share-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; } .req-dialog .share-lede { flex: 0 0 100%; margin: 0; } /* =========================================================================== MOM'S NOTE — a fixed object, like every other artifact on the page This was the only artifact positioned by JavaScript. It measured the layout on every resize and recomputed its own size and position, which is why it grew, shrank and jumped around while the bear, the glasses and the photos sat still. That behaviour was the bug, not the placement. It does not need measuring. Relative to the artifact layer, the sheet and the tally sit at the SAME coordinates at every desktop width - only the album moves. On phones the sheet is centred, so a centre-relative offset is just as fixed. So: one size, one position, per breakpoint. Like the others. ========================================================================== */ @media (min-width: 901px) { /* Sheet content never reaches past 434px from the layer's left edge at any desktop width, so 446 can never touch the copy. */ .chapter--goal .obj--hand { width: 200px; left: 446px; right: auto; top: 321px; bottom: auto; transform: rotate(-3deg); } /* and it passes behind the album, the way the other objects do */ .g-album { z-index: 5; } } @media (max-width: 900px) { /* The column is centred in the layer, so measure from the middle. Measured glyph edges on the rows the note sits beside: "already in" ends at +40, "Want to be one of the 1,000?" at +47 - the note's left edge was landing on +47 exactly, which is what made it look welded to the copy. Vertically it is set so the BODY of the word "pursuit" lands on "already in". Aligning the whole line's ink box read low, because that box includes the tall loops of "of" and "what"; the word's x-height core sits at 0.372 down the scan, not 0.328. The 3 degree tilt drops the left end a further 2px, so it starts that much higher again. */ .chapter--goal .obj--hand { width: 130px; left: calc(50% + 62px); right: auto; /* Centred in the open band: from the bottom of the aside (354) to the bottom of the Text Me / Email Me row (506). Centre 430, note 108 tall. */ top: 376px; bottom: auto; transform: rotate(-3deg); } } /* No small-phone shrink. It is better readable and running off the right edge than shrunk to fit inside it - the bleed reads as a note laid down past the edge of the page, which is the point of it. */ /* The one line of plumbing under the ask: what arrives, and when. Set as the same small type as the consent copy, not as a second lede. */ .chapter--goal .ask-note { margin: -8px 0 14px; font-size: 10.5px; line-height: 1.5; color: var(--ink-2); } @media (max-width: 900px) { /* Kept narrow so the line stops short of mom's note rather than running under it - the handwriting sits over this row on phones. */ .chapter--goal .ask-note { max-width: 200px; } } /* The registered entity, named on the opt-in page itself. */ .site-foot__entity { display: block; margin-top: 5px; color: var(--ink-3); } /* ---------------------------------------------- the handwritten letter -- */ /* His letter, scanned and keyed to transparent ink, sits directly on the album's page rather than as a white rectangle on top of it. */ .page-scan { display: block; width: 100%; height: auto; } /* Same on the zoomed sheet. */ .page-zoom-sheet .page-scan { width: 100%; } /* The letter's words as real text. Same recipe as .sr-only but without white-space: nowrap, which would run a whole letter onto one line. */ .note-transcript { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* The letter reads a touch small on the closed leaf, so it runs 12% wider there and spills evenly into the page's margin. The zoomed view keeps the plain 100% - it has all the room it needs. */ .face--back .page-scan, .page--left .page-scan { width: 112%; margin-left: -6%; } /* ------------------------------------------- terms + privacy in the footer The toll-free reviewer opens /marina. Both legal documents have to be one click away from that page, sitting under the entity line already there. */ .site-foot__legal { display: block; margin-top: 6px; } .site-foot__legal a { color: var(--ink-2); text-decoration: underline; } /* =========================================================================== RELEASE DAY — the page stops asking for a phone number and starts asking for a purchase. Written Sept 13, 2026, the night before. The counter is deliberately GONE here, not restyled. Before release it counted signups, which was true. After release the 1,000 means purchases, and nothing on this page can see a purchase. The goal stays as the section headline; the number does not come back without a defensible source. ========================================================================== */ body.is-released .presave-form { display: block; } /* overrides the old hide */ .release-lede { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); } /* The one thing this page wants you to do. */ .btn--buy { display: inline-block; width: auto; min-width: 0; /* .btn sets min-width:260px further up — undo it */ padding: 14px 26px; border: 0; border-radius: 3px; background: var(--ink); color: var(--paper); font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: .01em; text-align: center; text-decoration: none; box-shadow: 0 2px 0 rgba(64,52,47,.28); transition: transform .12s ease, box-shadow .12s ease; } .btn--buy:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(64,52,47,.24); } .btn--buy:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(64,52,47,.3); } .btn__sub { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .72; } /* Streaming sits below the purchase and stays visibly lighter than it. */ .release-secondary { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; } .release-link { font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--ink-3); padding-bottom: 1px; } .release-link:hover { color: var(--ink); border-bottom-color: var(--ink); } /* The reminder form survives release day, demoted to one collapsed line. */ .presave-later { margin: 0; } .presave-later > .presave-later__summary { display: none; } /* pre-release */ .presave-later[open] > .presave-later__summary { display: none; } body.is-released .presave-later > .presave-later__summary { display: block; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--paper-sheet-edge); font-size: 12.5px; color: var(--ink-3); cursor: pointer; list-style: none; } body.is-released .presave-later > .presave-later__summary::-webkit-details-marker { display: none; } body.is-released .presave-later > .presave-later__summary:hover { color: var(--ink-2); } body.is-released .presave-later[open] > .presave-later__summary { display: block; } body.is-released .presave-later > .presave-later__summary::after { content: ' +'; font-weight: 700; } body.is-released .presave-later[open] > .presave-later__summary::after { content: ' \2212'; } body.is-released .count { display: none !important; } /* The ask sits full width, above the form, clear of mom's note. */ body.is-released .ask-note { display: block; max-width: none; margin: 4px 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); } /* The release copy and the button both stop short of the right edge so mom's note sits where it always sat. She is the reason the page exists; the button moves for her, not the other way round. */ .release-lede, .release-secondary { max-width: 62%; } @media (max-width: 900px) { .btn--buy { padding: 16px 24px; font-size: 16px; } /* still thumb-sized */ .release-lede, .release-secondary { max-width: 60%; } } /* Specificity: `.chapter--goal .btn { width:100% }` (line ~2343) and the card's own paragraph measure both outrank a single class, which is why the button stayed full-bleed and the copy ran the whole width. Scope these to the card so they actually win — and so mom's note keeps the right-hand column it has always had. Nothing about her position changes. */ .chapter--goal .card .btn--buy { width: auto; max-width: none; min-width: 0; } .chapter--goal .card .release-lede, .chapter--goal .card .release-secondary, body.is-released .presave-later > .presave-later__summary { max-width: 55%; } @media (max-width: 900px) { .chapter--goal .card .release-lede, .chapter--goal .card .release-secondary, body.is-released .presave-later > .presave-later__summary { max-width: 58%; } } /* Release day opens up a block of empty sheet to the right of the purchase button and the streaming links. Her note moves down into it and gets bigger, because that space exists now and she should have it. Pre-release placement is untouched — this only applies once the song is out. */ @media (min-width: 901px) { body.is-released .chapter--goal .obj--hand { top: 451px; left: 315px; width: 240px; } } @media (max-width: 900px) { /* Top of her writing lands level with "Legacy" in the release copy, not level with the button - lining it up with the button made it look placed. Bigger, and hanging off the right edge of the sheet on purpose. */ body.is-released .chapter--goal .obj--hand { top: 448px; left: calc(50% + 28px); width: 160px; } } /* Shown only inside in-app browsers, where a purchase cannot complete without getting out to Safari first. Quiet until a jump is actually blocked. */ .buy-hint { max-width: 55%; margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); } .buy-hint strong { color: var(--ink-2); font-weight: 700; } .buy-hint.is-urgent { color: var(--ink); font-size: 13px; font-weight: 600; } .buy-hint.is-urgent strong { color: var(--ink); } @media (max-width: 900px) { .buy-hint { max-width: 58%; } } /* The Buy button and its in-app hint are gone - the form is the CTA now, and the page never links to a purchase. Streaming sits under the form. */ .release-streaming { display: none; } body.is-released .release-streaming { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--paper-sheet-edge); max-width: 60%; } @media (max-width: 900px) { body.is-released .release-streaming { max-width: 58%; } } /* The form is the call to action on release day, so its disclosure summary ("Can't buy it right now?") has no job any more - it only existed while a Buy button was competing with the form. */ body.is-released .presave-later > .presave-later__summary, body.is-released .presave-later[open] > .presave-later__summary { display: none; } /* Release day: news full width, the ask narrow beside mom's note, and room to breathe before the channel toggle. */ body.is-released .release-lede { margin-bottom: 20px; } body.is-released .choice { margin-top: 6px; }