/* /film — the reel, in theatre mode. Juan chose Theatre over Projection, and asked for somewhere real to put the credits rather than a one-line caption. CENTRED IN THE VIEWPORT, the same pattern as /code and the hero and every /work panel: the stage and its credits are one composition that sits in the middle of the screen, not a page that starts at the top. A REEL IS IMAGE-LED, so this one IS a slideshow, and that is not a contradiction of the tabbed trees on /code. The objection to carousels was never "one thing at a time" — it was auto-rotation and hidden slides. Here every film is named on a real thumbnail, the whole set is visible as a filmstrip the entire time, and the rotation stops the moment anyone touches it. What changes for a gallery is only the FORMAT: a frame wants the width, and five stacked would bury the last three. */ /* ⚠️ THE MAIN IS NOT `.wrap` ANY MORE, and that was the whole bug. `.wrap` is a READING measure — 940px max, minus 7vw of padding a side — so on a 1920px display it strangled the theatre monitor down to 671px and left the rest of the screen empty. Prose belongs in a reading measure; a screen does not. The stage is now sized to the VIEWPORT and only the text below it keeps a measure. And the header was sitting OUTSIDE this block, 272px of it, which is where the dead space above the monitor came from. It is inside the composition now. */ .doc__main.film { position: relative; min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: clamp(14px, 2.2vh, 26px); padding: 4vh 4vw 3vh; } .doc__head--sub { min-height: 0; padding-block: 0; text-align: center; } /* ─── SHORT VIEWPORTS: BUY THE CREDITS BACK OUT OF SPACING, NOT OUT OF THE MONITOR ──────────────────────────────────────────────────────────────── 🔴 THE HANDOFF SAID THE ONLY DIAL WAS --stage-h AND THAT ANY FIX SHRINKS THE MONITOR. Measured, that is true of --stage-h and FALSE of the page: at 1440 wide the stage is WIDTH-capped above ~881px of viewport height (--stage-w = min(74vw, 1180px, --stage-h*16/9); 74vw = 1065.6px, so the height settles at 599.4px and stops following svh). Above that height, lowering --stage-h below 66.6svh does nothing at all until it drops under the width cap — so the monitor was never the thing paying for this in that band. ⇒ The gaps and the block padding are. They are pure whitespace, they scale on vh, and on a short screen they are exactly the wrong thing to spend height on. MEASURED, 1440 wide, stable samples (sampled twice and required to agree — a single reading right after a resize catches the credits mid-reflow and reports a height ~38px too tall): before vh 900 -> credits bottom 920.3, 20.3px under the fold vh 940 -> credits bottom 925.2, visible The real break-even was ~921px, NOT the ~1010px the handoff carried. after vh 900 -> credits bottom 893.3, VISIBLE with 6.7px to spare, and the monitor is byte-identical at 1065.6x599.4 vh 1010 -> 956.7, unchanged (the rule is off above 940) ⚠️ MEASURE WITH scrollY PINNED TO 0. getBoundingClientRect() is viewport- relative, so a page left scrolled from an earlier probe reports a credits bottom that has nothing to do with the layout — this read 1019.7 at vh 1010 (apparently broken) and 956.7 (correct, 53.3px of slack) at the same size, and the only difference was scroll position. Two samples agreeing does NOT catch it; both agree on the same wrong number. ⚠️ THIS DOES NOT RESCUE EVERY HEIGHT, and that is Juan's call rather than a thing to fudge. At vh 800 — a 13" MacBook with browser chrome, so a genuinely common case — the stage is height-capped at 544px and the content is simply taller than the screen. Measured after: credits bottom 828.5, still 28.5px under the fold, improved from 52.5px. Closing that last 28.5px means shrinking the monitor, which is the trade the handoff described and it is his to make. ⚠️ Scoped `min-width: 901px` so it cannot touch the narrow branch, which has its own layout (film.css keys the static row on `max-width: 900px`). */ @media (min-width: 901px) and (max-height: 940px) { .doc__main.film { /* 1.4vh -> 1vh. There are TWO of these gaps above the credits (head/stage and stage/credits), so the saving doubles — which is why this was the last 6.4px rather than the padding, and the padding-BOTTOM is worth nothing here at all: it sits BELOW the credits and cannot move their bottom edge. */ gap: clamp(8px, 1vh, 16px); /* 2.6vh -> 1.2vh: the top padding is the least useful height on the page — it sits above a back link. */ padding-block: 1.2vh 2vh; } .film__credits { row-gap: 10px; } /* 🔴 THE HEAD IS CHROME TOO, AND THE RULE ABOVE NEVER REACHED IT. Everything in this block was written for .doc__main and its credits; the HEAD sitting directly above the monitor was left at full height, and it is 113px of pure chrome at 1440x800 — a back link, the page mark, and a VISUALLY HIDDEN h1. Measured breakdown before: .back 17px + 14.4 margin .page-mark 56px + 17.6 margin .doc__h1.vh 1px + 8.0 margin <- invisible, still in flow, still spending 8px of a short screen ⇒ Same argument as the note above, one region further up: this is whitespace that scales on vh, and on a short screen it is the wrong thing to spend height on. The monitor is not asked to pay anything. ⚠️ THE HIDDEN h1's MARGIN IS THE ONE WORTH NAMING. `.vh` here is the 1px-clip variant, so the element is still IN FLOW and its margin-bottom is real height reserved for something nobody can see. Nothing would ever surface that: it renders correctly, measures correctly, and simply costs. ⚠️ The page mark keeps its 56px. It is the page's actual title — the h1 is hidden precisely because the mark carries it — so shrinking it would be paying out of the design, which is the trade this whole block exists to avoid. Only the gaps around it move. ⚠️ Scoped to .film so it cannot reach the other pages that share .doc__head--sub. */ .film .doc__head--sub .back { margin-bottom: 8px; } .film .doc__head--sub .page-mark { margin-bottom: 8px; } .film .doc__head--sub .doc__h1 { margin-bottom: 0; } } /* the title is chrome around the media, not a headline competing with it */ .doc__head--sub .doc__h1 { font-size: clamp(22px, 2.6vw, 34px); margin: 0 0 8px; } .doc__head--sub .doc__lede { font-size: var(--t-md); } .doc__head--sub .back { margin-bottom: clamp(12px, 1.8vh, 20px); } .doc__head--sub .doc__h1 { max-width: none; margin-inline: auto; } .doc__head--sub .doc__lede { margin-inline: auto; text-align: center; } /* ------------------------------------------------------------- the stage --- */ :root { /* ⚠️ ONE SOURCE FOR THE STAGE WIDTH. The credits were min(92vw, 1500px) while the monitor was min(74vw, 1180px), so the film's name started 130px to the LEFT of the picture it belongs to and the panel ran wider than the thing it captions. Two independent widths for one visual object is a drift waiting to happen; both read this now. */ /* 🔴 THE MONITOR WAS CROPPING 27.9% OFF EVERY FRAME, AND `aspect-ratio` WAS NOT WINNING THE ARGUMENT IT LOOKED LIKE IT HAD WON. The stage declared `width: var(--stage-w)`, `max-height: 48svh` and `aspect-ratio: 16 / 9` together, and the note beside them said aspect-ratio "reconciles" the two bounds. It does not: an explicit width plus a binding max-height simply defeats it. Measured at 1440x900 the box rendered 1065.6 x 432 — a ratio of 2.467, not 1.778 — so `object-fit: cover` on 16:9 sources threw away 27.9% of the picture, top and bottom. ⚠️ TWO NOTES IN THIS FILE WERE FALSE BECAUSE OF IT: the mask viewBox is 16:9 "so preserveAspectRatio='none' stretches nothing", when it was in fact stretching the blur 1.387x horizontally; and the feather objection recorded below — that the old mask ate 18% of the height and "a cinematographer is hired on the frame" — was being made on a page that was silently eating 27.9% by a different mechanism. ⇒ THE HEIGHT BUDGET IS NOW EXPRESSED AS A WIDTH, so there is ONE bound and aspect-ratio has nothing to fight. Whichever of the two ceilings is smaller wins, the box is always exactly 16:9, and `--stage-w` stays the single source the credits also read — so the panel can never drift wider than the picture again. ⚠️ The width ceiling is deliberately UNCHANGED at min(74vw, 1180px): the orbiting thumbnails live in the margin beside the stage, and this page's one rule is that nothing performs in front of the work. Widening the monitor would buy scale by taking the orbit's room. Growing it DOWNWARD does not. ⚠️ 68svh, not 48: at 1440x900 the width ceiling binds, so the monitor keeps the exact width it already had and gains the 167px of height it was being denied — 39% more monitor and 28% more frame for no horizontal cost. Below roughly 880px of viewport height the height ceiling takes over and it shrinks, still 16:9. svh rather than vh because iOS resolves vh to the LARGE viewport while a max-height matches the SMALL one. */ --stage-h: 68svh; --stage-w: min(74vw, 1180px, calc(var(--stage-h) * 16 / 9)); } .film__stage { /* the mask shape, stated once so the four prefixed declarations cannot drift. viewBox matches the stage's 16/9 so preserveAspectRatio='none' stretches nothing and the blur stays circular. */ --stage-mask: url("data:image/svg+xml;utf8,"); position: relative; /* AS BIG AS IT CAN BE AND STILL FIT — but stated as ONE bound, not two. --stage-w already carries the height budget (see :root), so aspect-ratio is free to hold exactly and there is no max-height to defeat it. This is the content; it gets the room. 🔴 DO NOT REINTRODUCE `max-height` HERE. That is precisely what made the box 2.467:1 while every note in this file assumed 16:9. */ width: var(--stage-w); margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; background: #000; /* ⚠️ THE MONITOR FEATHERS AGAIN — Juan's call, and it REVERSES a decision recorded twice below. Read that note before touching this: the old mask dissolved 7% of each side and 9% of the top and bottom, which is 14% of the width and 18% of the height of every frame, and the objection was that a cinematographer is hired on the frame. What makes this a different trade is the AMOUNT and the SHAPE. It is 3.5% per edge rather than 7-9%, so ~93% of the composition is untouched, and the falloff is RECTANGULAR — it follows the picture's own box instead of an oval cutting across it, which is what Juan asked for and is also what a tube actually does: a defined picture area that loses brightness at its boundary, not a porthole. ⚠️ TWO GRADIENTS INTERSECTED, NOT ONE. A single linear-gradient can only feather one axis. Two masks composited with `intersect` (`source-in` on the -webkit- prefix, which is the older syntax and is NOT a synonym anywhere else in this file) give a rectangle soft on all four sides that inherits whatever aspect-ratio the stage has — so if the 16/9 above ever changes, the feather follows it with no second edit. */ /* ⚠️ A BLURRED ROUNDED RECT, WITH THE INSET SIZED TO THE BLUR. Two earlier attempts failed in opposite directions and both are worth keeping: · an SVG rect inset 4 units with stdDeviation 4 — the blur was CLIPPED BY ITS OWN viewBox. A Gaussian needs about 3σ to reach zero; it had 4 units of room for 12 units of ramp, so the mask stepped from ~35% straight to 0 at the element's boundary. A step is an edge, and that was the hard line on all four sides. · two linear gradients — these cannot clip, because a stop at 0% IS the element's edge. But they only feather the EDGES: the solid region stays a rectangle with slightly soft corners, which is why Juan read it as still too square. Feathering a rectangle does not round it. So: a rounded rect again, and the inset is now DERIVED from the blur rather than picked. σ = 4, inset = 12 = 3σ, so the ramp reaches zero exactly at the canvas edge and there is nothing left to truncate. rx 30 against a 136-wide rect is ~22% of its width and ~45% of its height — genuinely round, which is the ask, and the corner is round in the MASK rather than clipped by border-radius, so it is soft rather than a cut arc. ⚠️ Not a radial. A radial rounds the corners by darkening the middle of every edge too, which turned the picture into a vignette on an earlier pass and was rejected on sight. A rounded rect holds the centre fully opaque and only gives up the corners. Cost, stated plainly: 7.5% of the width and 13.3% of the height per side. That is more than the 7-9% a much earlier pass rejected — the difference is that Juan has now twice asked for the edge to stop reading as an edge, and this is what that costs. */ -webkit-mask-image: var(--stage-mask); mask-image: var(--stage-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-repeat: no-repeat /* ⚠️ NOT FEATHERED ANY MORE, AND THE REASON IS THE CONTENT. The old mask dissolved 7% off each side and 9% off the top and bottom — 14% of the width and 18% of the height of every frame, gone. On a page whose whole job is showing that Juan can compose a shot, throwing away the edges of the composition is the one cost this treatment cannot justify. A cinematographer is hired on the frame. The instinct is to check the reference. It cannot answer: leonardomoreira.com.br has no photographs on it at all — 199 fillRect calls, everything a rectangle, all text mono. It is a terminal, not a hybrid. So the answer comes from the object being imitated. A CRT does not fade its picture to nothing at the edges; it has a DEFINED picture area with rounded corners and falls off in brightness toward them. That is a radius plus the vignette this stage already carries — both of which say "displayed by a tube" without deleting the image. The thumbnails keep their feather: they are ambience, and nobody is judging a composition at 70px. The 1.5% falloff is the phosphor edge, not a dissolve. */ /* ⚠️ AND NOW NO FALLOFF AT ALL — Juan's call, and the right one. Even the 1.5% edge was still softening the frame, and this page has exactly one job. The picture is crisp to its own boundary; what says "tube" is the CORNER RADIUS and a thin lit picture edge, not a dissolve. He named the reference's startup screen as the thing he liked about edges, with one exclusion: NOT its distortion. That is the same call the README already made against barrel warp — real CRT curvature baselines near 0.04 and bending the picture costs legibility for nothing. So this takes the defined-picture-area half of that look and leaves the geometry alone. The inset rim is the phosphor edge: the picture area is slightly hotter at its boundary because the mask ends there. One pixel of amber at 30%, a soft inner bloom, and an outer halation that ties the frame to the machine around it. */ /* ⚠️ THE RADIUS MATCHES THE MASK'S CORNER, and that is why it is this large. It was clamp(6px, 0.9vw, 14px) — about 1% of the width — while the mask above rounds at ~16%. Two different corner radii on one picture is what Juan kept seeing as "hard lines": the mask dissolved a big round corner and the box-shadow below drew a nearly-square one straight across it, so the eye read the mismatch as an edge. They describe the same shape now. */ border-radius: 15%; /* ⚠️ "TOO CLEAN" HAD A MEASURABLE ANSWER, AND IT WAS NOT MORE SCANLINES. Read off the reference's own DOM rather than guessed at: it stacks THREE layers over its picture, and this frame had one of them. .crt radial vignette, and warm-dark (#0C0608) rather than neutral .crt-bulge a warm CENTRE LIFT — the tube is brighter in the middle of its face. It is the bulge read WITHOUT the geometry, which is exactly the half Juan wants and the half the README keeps (barrel warp stays rejected) .crt-glass a SPECULAR thrown from 22% / -8% — an origin OFF the glass entirely, so it reads as a reflection of the room rather than as a gradient The page already carries all three. The frame carried only the vignette, so the picture sat inside it as a perfectly even rectangle — which is what "clean" was. The emulation literature names the same two things this was missing: HALATION, light bouncing under the faceplate, and DIFFUSION, the glow of light passing out through imperfect glass. Both ADD light, which is why the layer below screens rather than overlays. And the glass has THICKNESS. There is a dark lip just inside the boundary before the lit edge — the tunnel of the faceplate. That inset shadow is doing more work here than anything else: a bright line on a crisp edge reads as a border, the same line over a dark lip reads as an edge lit from behind. */ /* ⚠️ THE 1px AMBER RIM IS GONE. It was `inset 0 0 0 1px rgba(240,168,60,.34)` — a hairline, perfectly crisp by definition, drawn at the element's edge. Against a feathered picture that is the single hardest line on the page, and no amount of rounding the corners hides it. The phosphor edge it was imitating is now carried by the soft inner bloom alone, which is the half that survives a dissolve. Everything left here is a BLUR, so nothing in this stack can draw a line. */ box-shadow: inset 0 0 12px rgba(0, 0, 0, .58), inset 0 0 34px rgba(240, 168, 60, .10), 0 0 60px rgba(240, 168, 60, .10), 0 0 150px rgba(240, 168, 60, .05); } /* the glass over the picture: the room reflected in it, and the face's own centre lift. Screen, because both are light being ADDED. */ .film__stage::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; mix-blend-mode: screen; /* ⚠️ SCANLINES ADDED HERE Aug 31 2026, on Juan's note that the monitor looked too clean. The THUMBNAILS already carry this page's full CRT treatment — the stage had the glare and the vignette and no lines at all, so the one surface holding the actual work was the only one that did not look displayed. They go in THIS stack rather than a new layer because both pseudo-elements are already spoken for (::before is this glare, ::after is the vignette) and because screen-blended black is exactly what belongs with a glare: it does nothing to the dark parts of a frame and bites only on the lit ones. Kept light — this is the content, and it should read as displayed, not damaged. */ background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .15) 0 1px, transparent 1px 3px), radial-gradient(80% 48% at 20% -10%, rgba(214, 234, 255, .075), transparent 60%), radial-gradient(74% 60% at 50% 44%, rgba(255, 220, 160, .055), transparent 66%); } .slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s ease; } .slide.is-on { opacity: 1; } .slide picture, .slide img { display: block; width: 100%; height: 100%; } .slide img { object-fit: cover; filter: saturate(.86) contrast(1.03) brightness(.88); /* the drift is what makes a still frame feel like it is being PROJECTED rather than displayed — it is the one motion a cinema has */ animation: film-drift 20s ease-in-out infinite alternate; } @keyframes film-drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.11) translate(-1.4%, -1%); } } /* the room the frame sits in */ .film__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; /* the tube's own falloff. It does more work now that the mask is not dissolving the edges — this is what keeps the frame from reading as a rectangle pasted on the page. */ /* warm-dark, not neutral — the reference's own vignette runs #0C0608 to #020001, and a neutral grey falloff is one of the things that reads as "a CSS effect" rather than as a tube. */ background: radial-gradient(122% 96% at 50% 45%, transparent 46%, rgba(12, 6, 8, .42) 78%, rgba(2, 0, 1, .80) 100%); } /* ----------------------------------------------------------- the credits --- */ /* THE CREDITS ARE A PANEL, NOT A CAPTION. A caption fits a title; this has to carry the role, the format and the year — the things somebody hiring a cinematographer actually reads. It lives OUTSIDE the slides on purpose: inside, two of them rendered on top of each other through every dissolve. */ .film__credits { /* ⚠️ ONE SOURCE FOR THE LABEL METRICS. The film's name sat lower than the copy beside it because the two columns have different rhythms: the meta column starts with an 8.5px label and puts its value underneath, while the title is a 32px line starting at the top of the grid. `align-items: start` aligns the BOXES, which is exactly why it looked wrong — the ink does not start where the box does. The title is pushed down by one label row so the two read off the same line, and both sides take the label size and gap from these two properties, so nudging one can never desync them. */ --cred-label: 8.5px; --cred-gap: 3px; width: var(--stage-w); margin: 0 auto; display: grid; gap: 14px clamp(20px, 3vw, 44px); grid-template-columns: 1fr; text-align: center; } @media (max-width: 779px) { .film__t { padding-top: 0; } } /* ⚠️ CENTRED AT EVERY WIDTH NOW — the two-column, left-aligned desktop layout is gone. It existed to sit the film's name beside its credits in one line, which was right under a rectangular monitor: the block's left edge lined up with the picture's left edge and the pair read as one unit. The monitor is a soft round window now with no left edge to align to, so a left-aligned block underneath hangs off nothing and pulls the eye away from a centred image. Juan's call, and the geometry agrees: centre the copy under a centred round thing. `--cred-label`/`--cred-gap` and the .film__t padding that used them to sit the title on the credits' baseline are only meaningful in the side-by-side layout, so the padding is zeroed here rather than left doing invisible arithmetic. */ @media (min-width: 780px) { .film__credits { grid-template-columns: 1fr; text-align: center; justify-items: center; } .film__t { padding-top: 0; } .film__meta { justify-content: center; } } .film__t { margin: 0 !important; padding-top: calc(var(--cred-label) * 1.5 + var(--cred-gap)); font-size: clamp(21px, 2.8vw, 32px); font-weight: 800; letter-spacing: -.018em; line-height: 1.05; color: var(--fg); } /* the logline. Reading face rather than the mono the meta rows use — this is a sentence about the film, not a spec value, and the two should not look like the same kind of fact. Held to 58ch so it breaks into two or three short lines under the monitor instead of one wide band the eye has to track. */ .film__syn { margin: 0; max-width: 58ch; justify-self: center; font-size: clamp(14px, 1.35vw, 16px); line-height: 1.5; color: var(--fg-dim); } .film__syn[hidden] { display: none; } /* a grid child ignores `hidden` without this */ .film__meta { display: flex; flex-wrap: wrap; gap: 6px clamp(14px, 2vw, 26px); justify-content: center; } @media (min-width: 780px) { .film__meta { justify-content: flex-start; } } /* ═══ ALSO ON SET ═════════════════════════════════════════════════════════════ 🔴 `.film__crew` HAD NO CSS AT ALL — zero rules in any stylesheet, found Sep 4 2026 by the overlap sweep. It was rendering as a browser-default `