/* ============================================================ REELS PAGE — the hero only. Everything else on reels.html uses shared classes. Loaded AFTER css/main.css. ============================================================ */ /* ------------------------------------------------------------ REELS HERO — the photograph's own maroon, run out sideways behind the words. The picture sits plain and whole against the right edge, as it did on bone. What changed is the ground: the grey of its studio backdrop now continues horizontally across the page, and the words sit on it. PHOTO SWAPPED 2026-10-08 — the maroon shot became a cool grey one, and every number below was re-measured from the new frame. The page used to be deep maroon (#49242b to #22080b); it is now mid-grey falling to charcoal. That is not a palette whim, it is the photograph. THE FIELD IS NOT AN INVENTED COLOUR. It is the photograph's own LEFT-HAND EDGE — the side facing the text — sampled down the frame and stretched out sideways, so at any given height the wall beside the picture is exactly the grey the picture has at that height, and its left edge stops being an edge: 0% #777c8e 30% #75737c 60% #5c5662 10% #7f818d 40% #6e6874 70% #4f4c53 her hair reaches the 20% #797a83 50% #66606c 80% #434047 edge below 86%, so 90% #3b383f these carry the wall's 100% #322f36 own fall on past it The lower two are not sampled from the left edge — below 86% her hair is what meets it, and sampling there returns #532f18 and #472711, which is BROWN. Running that out sideways would have painted a warm band across the page beneath a cool grey photograph. They continue the backdrop's own measured fall instead: -0.83 per 1% of height, taken from the clean 80% and 86% readings. That keeps the wall a wall all the way down. THE STOPS MAP ONE TO ONE, AND THEY ALWAYS WILL. 0% of the gradient is 0% of the frame, 100% is 100%, on every screen. That is not luck — the wall is given the PICTURE'S OWN HEIGHT with `background-size`, repeating the same min() the picture is sized by, so the two are locked together by construction. Below it, `background-color` continues the last stop, which is what the wall stands on when the picture is shorter than the stage. This replaces three rounds of arithmetic. The frame used to sit centred with the header's height above it, so the stops had to be placed wherever it happened to land — 20.5%/88.5%, then 13.8%/95.5% — re-placed every time its height changed, and drifting a couple of points anyway between a short screen and a tall one, because the header is a fixed height while the stage scales. It matters more now than it did: the picture is TALLER THAN THE STAGE on wide screens and shorter than it on narrow ones, so there is no single set of stops that could have been right for both. Above and below the picture the end tones hold, then ease a little darker at the very foot. IF THE PHOTO IS SWAPPED, RE-SAMPLE THAT EDGE. The field is this picture's colour; a different backdrop makes the left edge visible again. Nothing else is dressed: no fades on the picture's edges, no glow, no scrim. Its top and bottom edges meet the wall plainly, which is how Beth asked for the photograph to sit. ------------------------------------------------------------ */ .reels-hero { /* the stage supplies its own height and insets; .page-hero's padding would add a second band of air above the picture */ padding: 0; } .reels-hero__stage { position: relative; display: grid; /* PHONES STACK, they no longer layer. While the words sat ON the picture they all shared one cell, and a scrim underneath kept them legible. With the photograph left plain there is nothing to make ink readable over it, so the picture takes the first row and the words the one below. Picture row: auto, its own height. Words row: whatever is left. */ grid-template-rows: auto minmax(0, 1fr); /* 82svh, NOT 100 — the hero deliberately stops short of a full screen. Filling the screen exactly meant the maroon ran to the bottom edge with nothing past it, and there was no way to tell the page continued. It came down from 88 to 82 because there was still too much empty maroon under the words: that is 48px less at 1280x800, 65px less at 1920x1080. THE PICTURE DID NOT SHRINK WITH IT. Its height is a percentage of this, so the percentage went up by exactly the same factor (115% to 123.4%) and it comes out the same pixel size as before — 546x810 at 1280x800. If this number moves again, move that one with it, or the headshot changes size when only the field was meant to. With the reels section pulled up to meet it (see #reels below) the heading now clears the fold by about 112px on a 1280x800 screen. min-height rather than height on phones: the picture at full width is 557px on a 375 screen and the words want about 276 more, which is taller than the screen — a fixed height with overflow: hidden would simply cut the lede off. Desktop puts the definite height back, because the picture is sized as a percentage of it. */ min-height: 82svh; /* NO header clearance any more. The picture used to be held below the fixed header, which cost it the header's height twice over — once off its own size and again off the stage — and made "bigger picture" and "shorter hero" pull against each other. It runs to the top of the stage now and the nav crosses it. That is safe here because the nav is CREAM. The top of the frame is backdrop above her hair, where cream reads about 9:1, and where it meets her hair it is about 16:1 — dark hair is the easy case for light type. It was ink nav that could not survive this, back when the ground was bone. */ overflow: hidden; /* HOW FAR THE PICTURE SITS DOWN THE PAGE. It used to start hard against the top; Beth wanted it lower. Held in one place because THREE things have to move together — the picture, the wall that is sampled from it, and the band of colour above them both. In svh so it stays the same share of the opener on every screen. 6svh, then 9svh, now back to 6 — the picture has to fit inside the stage whole, and every pixel of drop is a pixel it cannot have. */ --photo-drop: 6svh; background-image: /* the wall, mapped onto the picture */ linear-gradient( to bottom, #777c8e 0%, #7f818d 10%, #797a83 20%, #75737c 30%, #6e6874 40%, #66606c 50%, #5c5662 60%, #4f4c53 70%, #434047 80%, #3b383f 90%, #322f36 100% ), /* and the band above it: the wall's first tone, held flat. Without this the strip over the picture would fall through to background-color, which is the LAST stop — near black — and the page would open on a dark bar. */ linear-gradient(#777c8e, #777c8e); background-repeat: no-repeat, no-repeat; background-position: 0 var(--photo-drop), 0 0; /* The picture at full width is its own height: 1910/1287 of the width. This is that, exactly, so the wall runs down at the picture's own rate. */ background-size: 100% 148.10vw, 100% var(--photo-drop); /* what the wall stands on below the picture — the last stop, continued */ background-color: #322f36; } /* ---- TWO SCRIMS, AND THE GREY PHOTOGRAPH IS WHY THEY EXIST ---- The maroon shot this page was built around was DARK, so cream type sat on it at 11:1 and nothing needed help. The 2026-10-08 photograph is MID-GREY, which is the one ground that suits neither light nor dark type: measured on the real composite at 1440, the nav read 3.54:1 in cream and 3.32:1 in ink. Swapping the type colour cannot fix that — both ends of the range fail — so the ground has to move, and the floor on this site is 4.5:1. Measured before these layers (cream, worst pixel under each item): nav + wordmark 3.54 · desktop eyebrow 3.98 · h1 4.30 · lede 5.03 tablet title band 3.54 · phone hero text 11.22 (already fine) So the failures are the TOP BAND, at every size, plus the desktop eyebrow where the text column starts high on the wall. Her face sits at 25-35% of the frame and is deliberately untouched by both layers. 1. THE TOP BAND darkens the first 18%, full width. It covers the wordmark and nav at every size, and the tablet title that round 54 lifted into the band above the picture. Full width matters: it darkens the wall AND the photograph by the same amount, so the left edge stays joined. 2. THE LEFT WASH is desktop only, where the copy sits beside the picture rather than under it. It fades out by 64% of the width and the picture starts at 68%, so it never touches the join either. */ .reels-hero__stage::after { content: ""; position: absolute; inset: 0; /* above the photograph, below .reels-hero__content (2) and the tablet title (3) */ z-index: 1; pointer-events: none; background: linear-gradient( to bottom, rgba(42, 30, 33, 0.34) 0%, rgba(42, 30, 33, 0.28) 7%, rgba(42, 30, 33, 0) 18% ); } @media (min-width: 901px) { .reels-hero__stage::after { background: linear-gradient( to bottom, rgba(42, 30, 33, 0.34) 0%, rgba(42, 30, 33, 0.28) 7%, rgba(42, 30, 33, 0) 18% ), linear-gradient( to right, rgba(42, 30, 33, 0.26) 0%, rgba(42, 30, 33, 0.26) 42%, rgba(42, 30, 33, 0) 64% ); } } .reels-hero__img { display: block; /* THE WHOLE PICTURE, never a crop: the box carries the photograph's own proportions, so what you see is the frame as shot. */ width: 100%; height: auto; align-self: start; /* TOP AND FOOT DISSOLVE; the sides do not. The picture is full width on phones, so its sides are the screen's own edges — no seam there to soften, and fading them would only show wall where the picture should be. THE TOP fades over 4%, down from 9% and then 5%. The frame's top strip is the brightest part of the backdrop — #8d8f9c across the middle against the wall's #777c8e beside it — so left hard it reads as a pale block. Four per cent takes that step off and stops just short of the crown of her hair, which starts at 4.6%: the fade is spent entirely on backdrop and none of her. THE FOOT is out by 100% — it dissolves the frame's OWN bottom edge now, and nothing else. This is the change that Beth's "more of the original photo, less crop" really asked for, and it retires a rule that had been tightening for four rounds. What used to happen: the picture was taller than the stage (123.4% of it), so its lower quarter fell outside and `overflow: hidden` would have cut it off square. The fade had to be finished before that line — at 87%, then 81%, 75%, 72% — which meant **the bottom 28% of the photograph was never seen at all**, and the fade ate into what was left. Every request for less gradient came out of the ramp, because the end could not move. What happens now: the picture fits inside the stage whole (92% of it, with --photo-drop above), so there is no cut to beat, nothing is cropped, and the fade has only the frame's real bottom edge to soften into the wall — the last 8%, about 48px. More photograph AND less gradient, which the old arrangement could not give at the same time. On narrow screens, where the guard makes the picture shorter than the stage, it fades early and leaves wall beneath — about 130px of it at 950x780. That is the same "space at the bottom" in a different guise, and it comes from the guard rather than from these numbers. */ margin-top: var(--photo-drop); /* THE FOOT FADE IS LONG AND EASED; THE TOP ONE IS SHORT. (2026-10-22, Beth: "blend the gradient better for the hero image on the reels page.") Measured on the painted composite — picture × mask over the sampled wall and the washes — the vertical gradient itself was never the problem: the wall matches the photo's backdrop within 1–9 levels down the whole left edge. The harsh part was the FOOT: her shoulder and arm run off the bottom of the frame, and the old 92%→100% fade dropped them into the wall across 50px, a slope of 20 levels per 6px at its steepest. 78%→100% with eased stops brings that to 11. THE TOP WAS TRIED LONGER AND PUT BACK. A 0→10% fade-in pulled the fade down over the top of her head at the centre columns and made that edge slightly worse (5 → 14 per 6px). The top of the picture is pale backdrop against the matching band and was only ever a 5-per-6px ramp; a short, eased 0→5% keeps it that way. Numbers in DECISIONS round 97. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 2.5%, #000 5%, #000 78%, rgba(0,0,0,0.80) 86%, rgba(0,0,0,0.42) 93%, rgba(0,0,0,0.12) 97.5%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 2.5%, #000 5%, #000 78%, rgba(0,0,0,0.80) 86%, rgba(0,0,0,0.42) 93%, rgba(0,0,0,0.12) 97.5%, transparent 100%); } .reels-hero__content { position: relative; z-index: 2; align-self: end; color: var(--bone-on-dark); padding: clamp(1.5rem, 5vw, 3rem); padding-bottom: clamp(2.5rem, 8vw, 4rem); } /* Cream family again now the ground is maroon. Measured against the wall where each line actually falls: eyebrow and headline 12.7:1, lede 11.8:1. */ .reels-hero__content .eyebrow { color: rgba(243, 236, 226, 0.8); } .reels-hero__content h1 { color: var(--bone-on-dark); } /* Oat, not the house rosewood. Rosewood is the accent on every pale page, but against this wall it only reaches about 2.8:1 and the accent word would be the least legible thing on the page. Oat reads 9.9:1. */ .reels-hero__content h1 em, .reels-hero__content .excl { color: var(--name-color); } .reels-hero__content .lede { color: rgba(243, 236, 226, 0.92); } /* The title wrapper generates no box by default — phones and desktop lay the opener out exactly as they did before it existed. Only the tablet block below turns it into a real element. */ .reels-hero__title { display: contents; } /* ---- TABLET (601-900 wide, tall enough to be a tablet): TITLE ABOVE THE PHOTOGRAPH, LEDE BELOW IT. Beth's call, 2026-09-11. WHY IT WAS NEEDED. This band stacks picture-then-words like phones do, but the picture is full width and the frame is 1910/1287, so its height is 148.10vw — 1215px on an 820-wide iPad. Measured before the change: the photo ran from y=71 to y=1288 and the whole word block (eyebrow, headline AND lede) began at y=1288, on a screen 1180 tall. You landed on the reels page and saw a photograph and nothing else — no title, no sign of what the page was. Phones escape this because the picture is only ~557px tall on a 375 screen, so the words clear the fold on their own; this is a tablet-only failure, which is exactly where Beth hit it. HOW IT WORKS, AND WHY IT IS SAFE. The title is lifted into the band above the picture rather than given a grid row of its own, and that choice is the whole trick: `--photo-drop` sets BOTH the picture's margin-top and the background's `background-position`, so growing it moves the picture and the wall painted behind it by the same amount, in lockstep. A grid row would have pushed the picture down while leaving the wall where it was, and the wall is sampled from this photograph's own left edge — the top of the frame dissolves into it over the first 4%, so a few hundred pixels of drift there would show as a visible seam. The lede is untouched and stays where it always was, below the picture. */ @media (min-width: 601px) and (max-width: 900px) and (min-height: 700px) { .reels-hero__stage { /* room for the header (76px), the eyebrow, the headline, and air either side. A fixed length, not svh: the band has to hold type of a known size, and svh would shrink it on a short screen exactly when the header does not shrink with it. Measured worst case across 601-900 is ~183px of content; 13.5rem is 216px. */ --photo-drop: 13.5rem; } /* static so the absolutely positioned title below anchors to the STAGE, not to this box — which sits under the photograph and would put the title back where it started. Dropping position also drops the z-index, which costs nothing: the content follows the picture in the document, and on this band the two do not overlap at all. */ .reels-hero__content { position: static; } .reels-hero__title { display: block; position: absolute; /* clear of the fixed header (76px) with 1.5rem of air under it */ top: 6.25rem; /* the same inset the content block pads itself by, so the title and the lede below the picture line up on the same left margin */ left: clamp(1.5rem, 5vw, 3rem); right: clamp(1.5rem, 5vw, 3rem); z-index: 3; } } @media (min-width: 901px) { /* DESKTOP: the words on the left, the photograph whole against the right edge, and the wall running out from under it behind them. */ .reels-hero__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 0.80fr); /* The wall takes the PICTURE'S height, repeating the same min() the picture is sized by, so the two cannot drift apart. Above 100% it runs off the bottom along with it; below, background-color carries the last stop on. (The base rule's 148.10vw is the phone equivalent — there the picture is full width, so its height is 1910/1287 of the width.) */ background-size: 100% min(92%, 64vw), 100% var(--photo-drop); /* Back to one row, with both children placed in it side by side — and back to a DEFINITE height, which is what lets the picture below be sized as a percentage of it. */ grid-template-rows: minmax(0, 1fr); height: 82svh; } .reels-hero__img { grid-column: 2; grid-row: 1; justify-self: end; /* START, not centre. The picture is taller than the stage now, and centred it hung 53px off the TOP as well as the bottom — which cropped the crown of her head and put the top fade off-screen where it did nothing. All of the overhang belongs at the foot, where the fade is already dealing with it. */ align-self: start; /* 92% OF THE STAGE — and the significant part is that it is under 100%. 407x603 on a 1280x800 screen, 549x815 at 1920x1080. IT GOT SMALLER ON PURPOSE, AND IT SHOWS MORE. It was 123.4%, taller than the opener, with its lower quarter falling outside and being dissolved away: 810px tall but only 72% of the photograph ever visible. At 92% the whole frame fits between --photo-drop and the foot of the stage, so nothing is cropped at all. The picture measures about a quarter less, and there is roughly a quarter MORE photograph in it — that is the trade Beth asked for with "more of the original photo, less crop", and the two cannot both go up. 92% is not free choice: it is (82svh − 6svh) ÷ 82svh, rounded down a little. THE STAGE, THE DROP AND THIS NUMBER STILL MOVE TOGETHER — the picture must not exceed stage minus drop, or the crop comes back. The 64vw half of the min() is a guard, not the usual answer. Height alone keeps the box exactly the size of the picture (width: auto, so no letterboxing), but on a narrow-and-tall window 123.4% of the stage is wider than the column, and max-width would clamp the BOX and letterbox the picture inside it. 64vw is the largest cap that still fits the 0.80fr column at every ratio, and small enough that it never bites above about 1270px wide. THESE THREE NUMBERS ARE A SET — 92%, 64vw, 0.80fr — along with the stage's 82svh and --photo-drop. (0.80fr is wider than 92% needs; it is sized for the 64vw guard, which on a tall narrow window still produces the widest picture.) Slack in the column is about 23px at 1280x800, 12px at 950x780, 11px at 901x1200. Move one and re-check the rest at all three. */ height: min(92%, 64vw); width: auto; max-width: 100%; /* AND THE LEFT EDGE DISSOLVES TOO. It is the only side that meets the wall — the right is the screen's own edge — so it is the one that shows. The wall already matches this edge to within a value or two, which is what lets the fade be this short: 4% (down from 8%, then 5%) is not hiding a mismatch, it is taking the last hairline off where her hair meets the frame. This is the cheapest of the three to shorten for exactly that reason — there is almost nothing for it to hide. Composited with the top and foot fades from the base rule; mask-composite needs the -webkit- spelling too, and Safari uses source-in where the standard says intersect. */ /* THE LEFT FADE IS 14% AND EASED, NOT 4%. Her hair and shoulder reach the picture's left edge over its bottom third; the old 4% (17px) fade reached full opacity so fast that the cut read as a near-hard line — a 55-level difference between her hair and the wall arriving inside 17px, 13 levels per 6px at the steepest. 14% (59px) with eased stops brings that to 8 per 6px, measured. Above where she reaches the edge the fade crosses only backdrop that already matches the wall, so the extra length costs nothing there. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 2.5%, #000 5%, #000 78%, rgba(0,0,0,0.80) 86%, rgba(0,0,0,0.42) 93%, rgba(0,0,0,0.12) 97.5%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0,0,0,0.25) 4%, rgba(0,0,0,0.70) 9%, #000 14%, #000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 2.5%, #000 5%, #000 78%, rgba(0,0,0,0.80) 86%, rgba(0,0,0,0.42) 93%, rgba(0,0,0,0.12) 97.5%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0,0,0,0.25) 4%, rgba(0,0,0,0.70) 9%, #000 14%, #000 100%); mask-composite: intersect; } .reels-hero__content { grid-column: 1; grid-row: 1; align-self: center; /* inset to the site's container gutter, so this headline lines up with every other page's */ padding-left: max(var(--gutter), (100vw - var(--container)) / 2); padding-right: clamp(1.5rem, 3vw, 3rem); padding-bottom: clamp(1.5rem, 3vw, 3rem); } .reels-hero__content .measure { max-width: 26em; } } /* ------------------------------------------------------------ THE REELS SECTION COMES UP TO MEET THE WALL. The shared section rhythm (`--space-section`, about 125px at desktop) left the heading marooned in bone a long way below the maroon, and with the hero filling the screen exactly there was nothing to say the page continued. Half that padding ties the section to the hero and, with the hero ending at 92svh, puts the top of "Watch / Reels" just over the fold on a typical screen — so the cut of maroon into bone reads as "there is more below" rather than as the end of the page. The number was picked by measuring, not by taste: at 58px the heading landed six pixels above the fold on a 1280x800 screen, which is not a cue, it is an accident. 40px cleared it by 24. At 32px, with the hero down to 82svh, it clears by about 112 — the whole heading in view. (`.reveal` elements sit 28px lower and invisible until they are seen; anything on screen at load is revealed immediately, so a heading that crests the fold really is visible there — which is why this one does not carry the class.) Top only. The space BELOW the reels is the site's normal rhythm and stays. ------------------------------------------------------------ */ #reels { padding-top: clamp(1.75rem, 2.5vw, 2rem); }