, so an unscoped .read rule set applies to every span inside them. It did: the on-this-page index and the call to action were forced to 11px uppercase blocks, and the whole page lifted 2px on hover. */ .readout b{display:block;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:.95;letter-spacing:-.03em; font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums} .readout span{display:block;font-size:var(--t-tech);letter-spacing:.11em;text-transform:uppercase; color:var(--ink);margin-top:.4rem} .state{display:flex;align-items:center;gap:.55rem;margin:0; font-size:var(--t-tech);letter-spacing:.11em;text-transform:uppercase;color:var(--ink)} .dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--state);flex:0 0 auto; transition:background-color .3s var(--ease)} .ticks{position:absolute;left:var(--gut);right:calc(var(--gut) + 2vw);bottom:1.3rem; list-style:none;margin:0;padding:0;display:flex;justify-content:space-between; font-size:max(.625rem, 10px);letter-spacing:.12em;color:var(--ink)} /* Was 11px at opacity .55, which measures 4.17:1: under the 7:1 floor this site holds small text to, and set with opacity rather than a chosen colour. Both states are now real tokens that clear the floor on every ground. */ .ticks li{color:var(--ink-2);transition:color .2s var(--ease)} .ticks li.on{color:var(--ink)} .progress{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)} .progress i{display:block;height:100%;width:var(--p, 0%);background:var(--accent)} /* ---- the controls, after the scene ------------------------------------- The section used to open with a screen-reader-only

, so a sighted reader arrived at six unlabelled inputs with no statement of what they were for. The heading is visible now and the lead is a sentence rather than an 11px uppercase technical label. / .controls{padding-block:clamp(3rem,7vh,5rem) 0;border-top:2px solid var(--ink)} .controls-in{display:grid;gap:var(--s3);max-width:34rem;margin-bottom:var(--s5)} .ctl-title{font-size:clamp(1.375rem,2.2vw,1.875rem);line-height:1.15;letter-spacing:-.015em; margin:0;color:var(--ink)} .rig-lead{margin:0 0 var(--s2);color:var(--ink);max-width:46ch; font-size:var(--t-body);line-height:1.5} .ctl-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);margin-bottom:.4rem} @media (max-width:56rem){ .stage{grid-template-columns:1fr;padding-right:var(--gut)} .roll{grid-area:auto;position:absolute;inset:0;margin:0;opacity:.16;z-index:-1} .col{justify-content:flex-start} .hud{position:static;margin-top:auto} .ticks{display:none} } @media (prefers-reduced-motion:reduce){ .roll-strip,.roll-strip img,.says .lede{transform:none} } / ---- the controls, restored ------------------------------------------- These were collateral damage when the section-era CSS was stripped, which left the segmented buttons rendering as browser defaults: black on light grey even in the dark theme. Unstyled controls fail contrast in a way no token audit catches, because the tokens were never applied. / .k{font-size:var(--t-tech);letter-spacing:.11em;text-transform:uppercase;margin:0;color:var(--ink)} .v{font-size:var(--t-tech);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ink)} input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:1.6rem; background:none;cursor:ew-resize} input[type="range"]::-webkit-slider-runnable-track{height:1.6rem;background:var(--g0);border:1px solid var(--ink)} input[type="range"]::-moz-range-track{height:1.6rem;background:var(--g0);border:1px solid var(--ink)} input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none; width:1rem;height:1.6rem;background:var(--ink);border:1px solid var(--ink);margin-top:-1px} input[type="range"]::-moz-range-thumb{width:1rem;height:1.6rem;background:var(--ink); border:1px solid var(--ink);border-radius:0} .seg{display:flex;border:1px solid var(--ink);max-width:26rem} .seg button{flex:1;font:inherit;font-size:var(--t-tech);letter-spacing:.08em; text-transform:uppercase;background:var(--g0);color:var(--ink); border:0;border-right:1px solid var(--ink);padding:.5rem .4rem;cursor:pointer;min-height:2.75rem} .seg button:last-child{border-right:0} .seg button.on{background:var(--ink);color:var(--g0)} / scoped: this is the scene's word control, not a site-wide input style. Left unscoped it capped the contact form's text fields at 26rem while the email field, which the selector never matched, ran full width beside them. / .controls input[type="text"]{font:inherit;font-size:var(--t-body);width:100%;max-width:26rem; background:var(--g0);color:var(--ink);border:1px solid var(--ink); padding:.6rem .75rem;min-height:2.75rem} / ===================================================================== RESPONSIVE. Every width from 320 to 3440, and every browser zoom. Measured, not assumed: at 360 the five column record table pushed the document 3px wide, which is a horizontal scrollbar on a phone. ===================================================================== / / ---- the record collapses instead of overflowing --------------------- / @media (max-width:48rem){ .record thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .record table,.record tbody,.record tr,.record td{display:block;width:100%} .record tr{border-bottom:1px solid var(--line);padding:.9rem 0} .record td{border:0;padding:0} .record td:nth-child(1){font-size:1rem;margin-bottom:.25rem} .record td:nth-child(2){color:var(--ink);opacity:.8;margin-bottom:.5rem} .record td:nth-child(3)::before{content:"measured ";font-size:max(.625rem, 10px);letter-spacing:.12em; text-transform:uppercase;opacity:.7} .record td:nth-child(4)::before{content:"budget ";font-size:max(.625rem, 10px);letter-spacing:.12em; text-transform:uppercase;opacity:.7} .record td.n{text-align:left;padding:0;display:inline-block;width:auto;margin-right:1.5rem} .record td:nth-child(5){display:inline-block;width:auto;vertical-align:middle} } / the table never causes a scrollbar at any width / .record{overflow-x:auto} .record table{min-width:0} / ---- line height is a scale, not a per element guess ------------------ / :root{--lh-tight:1.06;--lh-snug:1.3;--lh-body:1.6;--lh-loose:1.7} .spec{line-height:var(--lh-tight)} .lede{line-height:var(--lh-body)} .k,.v,.readout span,.ticks li,.sheet-trim{line-height:var(--lh-snug)} .record td,.record th{line-height:var(--lh-snug)} body{line-height:var(--lh-body)} / ---- text never runs long or short ----------------------------------- / .lede{max-width:min(46ch,100%)} .spec-hero{max-width:min(calc(17ch / var(--col-fit,1)),100%)} .sheet .spec{max-width:none} / ---- short viewports: the sticky stage must not clip its own content -- / @media (max-height:44rem){ .stage{padding-top:clamp(3.2rem,7vh,4.5rem);padding-bottom:clamp(2.2rem,5vh,3rem); gap:clamp(.8rem,2vw,1.6rem)} .col{gap:clamp(.5rem,1.4vh,.9rem)} .spec-hero{font-size:calc(clamp(1.35rem,3.2vw,2.4rem) var(--col-fit,1))} .sheet{padding:.6rem .8rem} .readout b{font-size:clamp(1.1rem,2vw,1.6rem)} } @media (max-height:34rem){ .sheet{display:none !important} /* the sheet is the first thing to go, not the headline / .hud-reads .readout:nth-child(n+3){display:none} } / ---- very small screens ---------------------------------------------- / @media (max-width:24rem){ :root{--gut:1rem} .spec-hero{font-size:calc(clamp(1.4rem,7.5vw,1.9rem) var(--col-fit,1))} .nav-links{gap:.75rem} :root{--nav-t:.625rem} .hud-reads{gap:1rem} } /* ---- very large screens: fluid container, never a lonely column ------- / @media (min-width:100rem){ .stage{grid-template-columns:minmax(0,1fr) clamp(22rem,24vw,34rem)} .spec-hero{font-size:calc(clamp(3.4rem,3.6vw,5rem) var(--col-fit,1)); max-width:min(calc(16ch / var(--col-fit,1)),100%)} .says .lede{font-size:clamp(1.2rem,min(1.2vw,2.4vh),1.6rem)} .readout b{font-size:clamp(2rem,min(2vw,4vh),2.8rem)} .record{max-width:min(120rem,100%)} } /* ---- wide screens: the controls stop being a lonely left column -------- Measured at 1440: the block used 544px and left 831px of empty page to its right, which is most of the screen, and is why the section read as a stray form rather than part of the piece. Two columns from 68rem up. / @media (min-width:68rem){ .controls-in{max-width:min(76rem,100%); grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s5);align-items:start} .ctl-title,.rig-lead{grid-column:1 / -1} } / One step wider, and no second rule anywhere else setting this: the pair that used to live in the 100rem block cancelled each other, 120rem then 46rem, so the wider value never applied. / @media (min-width:100rem){ .controls-in{max-width:min(96rem,100%)} } / ---- honour user zoom: nothing is a fixed pixel island ---------------- This was written as a floor and behaved as a lock. max(0.6875rem, 11px) evaluates to 11px at EVERY root size, because 0.6875rem IS 11px: the two halves were the same number, so the rem half could never win and these labels sat at 11px whatever the reader asked for, including through the page's own Text size control. The shape was right, the values were not. --t-tech is 13px now, so the rem half grows with the root while the px half still catches the bottom: at the Text size floor of 12 these would fall to 9.75px, and 11 is as small as any label in here is allowed to get. / .theme,.k,.v,.readout span,.ticks li{font-size:max(var(--t-tech), 11px)} / The nav keeps its own narrow-screen reduction: --nav-t drops to .625rem below 30rem and must still win there, or the links wrap the header. / .nav-links a{font-size:max(var(--nav-t, .75rem), 10px)} / ---- small and short screens: the scene UNSTICKS ---------------------- A 100vh sticky stage with overflow hidden was clipping up to 183px of its own content on a 568px tall phone, measured. Below these thresholds the stage stops being sticky and simply flows, so nothing is cut off. The roll stays as a quiet ground, the readouts stay live, and everything is reachable. / @media (max-width:48rem), (max-height:34rem){ .track{height:auto} .stage{position:static;height:auto;min-height:auto;overflow:visible; display:block;padding:clamp(2.5rem,7vh,4rem) var(--gut) clamp(2rem,5vh,3rem)} .col{display:flex;gap:clamp(.9rem,2.4vh,1.4rem)} .roll{position:relative;inset:auto;opacity:1;z-index:0;margin:1.6rem 0 0; height:min(52vh,26rem);overflow:hidden} .roll-strip{position:absolute} .hud{position:static;margin-top:1.6rem;gap:1rem} .ticks{display:none} .progress{position:fixed;top:0;left:0;right:0;z-index:20} .sheet{display:block;width:auto !important;max-width:100%} .hud-reads .readout:nth-child(n+3){display:block} } / ---- the record can never widen the document ------------------------- / .record{overflow-x:auto;-webkit-overflow-scrolling:touch} .record table{width:100%;table-layout:fixed} / Five equal columns handed the status dot the same width as the description, forcing four line cells while a fifth of the table sat empty. / .record th:nth-child(1){width:19%} .record th:nth-child(2){width:45%} .record th:nth-child(3){width:14%} .record th:nth-child(4){width:14%} .record th:nth-child(5){width:8%} .record td,.record th{overflow-wrap:anywhere} @media (max-width:48rem){ .record table{table-layout:auto} .record{overflow-x:visible} } / ---- ultrawide: a fluid container, not a stretched strip --------------- At 3440 the reading column measured 2745px with the text capped near 1000px, leaving about 1700px of dead space beside it. The rule is a fluid container, never a small fixed max-width and never a lonely column. / @media (min-width:110rem){ .stage{ padding-left:0;padding-right:0; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(3rem,4vw,6rem); } .col,.hud{padding-left:var(--edge)} .roll{margin-right:calc((100vw - min(92vw,148rem)) / -2 - 2vw)} / Body copy grows on a large monitor; the display type does not. A 64px headline on a 27 inch screen is already loud enough, and the text you actually read is the thing that was too small. / / The HERO stays where it was; the growth goes into the copy. Both are sized on BOTH axes so a wide but short window cannot produce a line that will not fit the column it has to live in. / / a 96px headline inside a 15ch measure is a six line tower that does not fit the column it lives in. Wider measure, same size, four lines. / .spec-hero{font-size:calc(clamp(4rem,4.4vw,6rem) var(--col-fit,1)); max-width:min(calc(20ch / var(--col-fit,1)), 100%)} .says .lede{font-size:clamp(1.35rem,min(1.35vw,2.7vh),2.1rem);max-width:min(50ch,100%)} .readout b{font-size:clamp(2.4rem,min(2.4vw,4.8vh),3.4rem)} .sheet .spec{font-size:clamp(1.4rem,min(1.55vw,3.1vh),2.3rem)} .chapter,.state,.readout span{font-size:clamp(.75rem,.75vw,1.05rem)} .ticks li{font-size:clamp(.7rem,.68vw,.95rem)} } /* ===================================================================== ALIVE AT REST, AND RESPONSIVE TO THE HAND. The page had no pulse when nobody scrolled, and the only pointer response was a text cursor. Everything below is subtle on purpose: at rest it should read as breathing, not as animation playing at you. ===================================================================== / / the strip carries a slow drift on top of the scroll position, and the pointer shifts it in both axes for depth / .roll-strip{transform:translate3d(var(--roll-x, 0px), var(--roll, 0px), 0)} / each frame breathes on its own phase, so they never move in lockstep / .roll-strip figure{position:relative;overflow:hidden;transition:flex-basis .5s var(--ease)} .roll-strip img{ transform:scale(var(--fs, 1.13)) translate3d(var(--bx, 0px), var(--by, 0px), 0); transition:filter .5s var(--ease), opacity .5s var(--ease); will-change:transform; } / the film gate: the frame under the pointer sharpens, its neighbours recede / .roll-strip figure[data-near="1"] img{filter:grayscale(1) contrast(1.08) brightness(1.04)} .roll-strip figure[data-near="0"] img{filter:grayscale(1) brightness(.82);opacity:.72} / the sheet leans toward the pointer, and lifts as it gets close / .sheet{ transform:perspective(1400px) rotateX(calc(var(--tilt-y, 0) -1deg)) rotateY(calc(var(--tilt-x, 0) * 1deg)) translate3d(0, calc(var(--near-lift, 0) * -4px), 0); transition:transform .45s var(--ease); will-change:transform; } /* every word of the headline answers the pointer through the weight axis, which is the one thing on this page that only exists because the typeface is variable and is genuinely his / .wd{display:inline-block;font-style:normal;font-variation-settings:"wght" var(--wd, 400); transition:font-variation-settings .28s var(--ease)} / the state dot has a heartbeat, so the instrument reads as running / .dot{animation:beat 3.4s var(--ease) infinite} @keyframes beat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.55}} / controls answer the hand / .readout{transition:transform .3s var(--ease)} .readout:hover{transform:translateY(-2px)} .nav-links a{position:relative} .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px; background:currentColor;transform:scaleX(var(--u, 0));transform-origin:left; transition:transform .3s var(--ease)} .nav-links a:hover::after{--u:1} .nav-links a:hover{text-decoration:none} .seg button,.theme{transition:background-color .2s var(--ease),color .2s var(--ease), transform .2s var(--ease)} .seg button:hover{background:var(--g2)} .seg button.on:hover{background:var(--ink)} input[type="range"]::-webkit-slider-thumb{transition:transform .18s var(--ease)} input[type="range"]:hover::-webkit-slider-thumb{transform:scaleY(1.12)} .record tr{transition:background-color .2s var(--ease)} .record tr:hover{background:var(--g1)} @media (prefers-reduced-motion:reduce){ .roll-strip,.roll-strip img,.sheet{transform:none !important} .dot{animation:none} .wd{transition:none} } / ===================================================================== ONE LEFT EDGE. Measured at 300px: the chapter label, headline, body copy, readouts and the hud all sat at left 16, while the specimen sheet's TEXT sat at 33, pushed right by the sheet's own 16px padding and 1px border. A bordered box aligned on its box is misaligned on its content, and content is what the eye reads down. Desktop: pull the sheet left by exactly its padding plus border, so its text lands on the same edge as everything else and only the box bleeds. Small screens: drop the side padding and the side borders entirely, so the text aligns with nothing to compensate for. ===================================================================== / / THE SPECIMEN SITS ON THE LINE, BOX AND ALL. It used to be a bordered box pulled left by its own padding so that its TEXT landed on the shared edge. That aligned the text and put the BOX out on its own, one edge out of line with everything above it. A box whose edge and whose text cannot both sit on the line is the wrong object. So it loses its left and right sides and becomes a band between two rules: edge, text and everything above it now land on exactly one line, with nothing to compensate for. / :root{--sheet-pad:0px} .sheet{ width:auto; margin-left:0; padding:clamp(.8rem,1.6vh,1.2rem) 0; border-left:0;border-right:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; box-shadow:none; } .sheet .spec,.sheet-trim{margin-left:0} / ===================================================================== ONE EDGE, DEFINED ONCE. Two different gutters were in play above 110rem: the stage centred itself and gave the column its own padding, while the progress rule and the tick row kept the old page gutter. That is 15px of daylight between the rule and the "00" underneath it, which is exactly what it looked like. Everything on the left of the scene now reads ONE value. ===================================================================== / / --frame is the page's own width, --edge the inset from it to the text. Every top level block on every page uses BOTH, so there is exactly one left edge from the logo at the top to the licence line at the bottom. Before this the nav had no frame at all and ran the full viewport, the scene and the controls used different insets above 110rem, and the reading pages had a third box again: on a 3440 screen the logo sat 528px left of the headline. / :root{--frame:100%; --edge:var(--gut)} @media (min-width:110rem){ :root{--frame:min(92vw,148rem); --edge:clamp(2rem,3vw,4rem)} } .nav,.stage,.controls,.foot,.read{ max-width:var(--frame); margin-inline:auto; } / .record is nested inside .controls, so it must NOT take the inset again or the table sits at twice the edge. It inherits the frame from its parent. / .nav,.controls,.foot{padding-left:var(--edge);padding-right:var(--edge)} .ticks,.progress{left:var(--edge);right:var(--edge)} / ===================================================================== NOTHING GETS CUT OFF, AT ANY WIDTH. Measured at 220px: the nav links reached x=276, the theme button 276 and the four readouts 259, all against a 220px viewport. The document did not scroll sideways because the root clips, which is worse: the controls were simply amputated instead of announcing themselves. ===================================================================== / .nav{flex-wrap:wrap;row-gap:.6rem} .nav-links{flex-wrap:wrap;row-gap:.5rem;min-width:0} .nav-links a,.theme{white-space:nowrap} / four readouts in a row stop fitting long before the text does / .hud{flex-wrap:wrap;row-gap:1rem} .hud-reads{flex-wrap:wrap;row-gap:1rem;min-width:0} .readout{min-width:0} @media (max-width:30rem){ .hud-reads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.25rem;width:100%} .hud{width:100%} } @media (max-width:22rem){ .nav-links{gap:.6rem} :root{--nav-t:.625rem} .theme{padding:.3rem .45rem} } / a very long word must break rather than push the layout / .spec,.lede,.record td{overflow-wrap:break-word} .spec-hero{hyphens:none} / When the column cannot hold everything on one screen, the specimen is what goes. Set by the engine after it measures, never by a breakpoint guess. / .col.no-sheet .sheet{display:none} / Held for the few milliseconds the record table samples colour. A value caught mid fade is not a value that is on the page, and that number gets published. / :root.sampling , :root.sampling ::before, :root.sampling ::after{transition:none !important}