inside .sec-head — 19.92px, which is below the 27px
body line-height floor and put "Selected work" almost on top of the client
grid above it, while the same section put 48px between that heading and its
first row. Less space BETWEEN sections than inside one.
Rule 8: rhythm is declared, never inherited. The case studies already do this
(.cs-section padding-top + .cs-section-head h2{margin:0}); the homepage was
never given the same treatment. Same clamp so the two page types breathe
alike. .opening and .contact are excluded: they set their own larger padding
as the first and last blocks on the page. */
/* section.clients, NOT a bare .clients: the case studies use a
INSIDE a .cs-section that already owns its padding, so
the bare selector put 80px of unasked-for space in the middle of Lucrum. Only
the homepage top-level section is meant here. */
section.clients, #work, #method, #about{padding-top:clamp(48px,7vw,80px)}
.sec-head{margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{margin:0}
.sec-head p{margin-top:var(--sp-3)}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.5}
.muted{color:var(--muted)}
/* A pull fact, used where the page would have reached for a stat tile. Same
information, a sixth of the furniture. */
.pull{margin:clamp(28px,4vw,44px) 0 0;padding-left:var(--sp-6);
border-left:2px solid var(--accent);font-family:'Bricolage Grotesque',sans-serif;
font-weight:600;font-size:clamp(20px,2.4vw,27px);line-height:1.3;
letter-spacing:-0.018em;max-width:30ch}
/* The line that lets a reader leave and check. Deliberately quieter than the
pull fact above it: the number is the claim, this is the receipt. */
.verify{font-size:15px;line-height:1.55;color:var(--muted)}
.colophon{border-top:1px solid var(--line);
padding-block:var(--sp-6) max(var(--sp-6), env(safe-area-inset-bottom));
font-size:14px;color:var(--muted);
display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-6);justify-content:space-between}
/* The build credit sits opposite the copyright rather than under it: the row
already spans the full measure and a second stacked line would read as a
second colophon. Wraps to its own line under 480px, where they no longer fit
side by side. */
.colophon .built a{color:inherit;text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:3px;
min-height:44px;display:inline-flex;align-items:center}
.colophon .built a:hover{color:var(--text);text-decoration-thickness:2px}
/* ── Contact ──────────────────────────────────────────────────────────────
The old footer rules are all scoped to `footer.site-footer`, and the Practice
contact block is a instead, so none of them reached it and every
link came back at 21px tall. These are the Practice equivalents. The case
studies keep the old footer until phase 5 moves them onto this one.
No "ELSEWHERE" label above the links: the links say what they are, and a
poetic label for a list of links is on the banned list. */
.contact{padding-block:clamp(56px,8vw,104px) clamp(40px,5vw,64px)}
.contact .f-email{
display:inline-flex;align-items:center;width:fit-content;min-height:44px;
margin-top:var(--sp-5);
font-family:'Bricolage Grotesque',sans-serif;font-variation-settings:'opsz' 72;
font-weight:700;font-size:clamp(26px,5vw,52px);letter-spacing:-0.03em;
line-height:1.05;color:var(--text);
text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.contact .f-email:hover{text-decoration-thickness:2px}
.contact .f-else{margin-top:clamp(28px,4vw,44px);display:flex;flex-wrap:wrap;
gap:var(--sp-3) var(--sp-6)}
.contact .f-else a{min-height:44px;display:inline-flex;align-items:center;font-size:16px}
/* A logo in the client wall that links out is a discrete control, not a word
inside a sentence, so it does not get the inline-prose exemption from the
44px floor. It laid out at 91x41. */
.clients .cell a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* The UA gives h1 a 0.67em margin, which lands at 21.4px and off the 4pt
grid. Rhythm on this page is declared, not inherited. */
.cs-head h1{margin:0}
.cs-head .lede{margin-top:var(--sp-6)}
/* Rhythm on these is declared, not inherited. A bare carries the UA's 1em
margin, which lands at 21px and 15px here and off the 4pt grid — invisible in
the source, caught only by measuring the rendered page. */
.cs-head .lede{margin:var(--sp-6) 0 0}
.verify{margin:var(--sp-3) 0 0}
.pull + .verify{margin-top:var(--sp-4)}
/* ============================================================================
LUCRUM CONTROL COMPONENTS
Ported 2026-09-01 from explore/practice/assets/practice.css when the live
Lucrum page was rebuilt as a literal copy of the control. .band, .twocol,
.clients .roster-grid and .twocol .reflection-quote came across in the
earlier migration; these four did not, and the copy needs all four.
Token names are translated, not copied. Practice calls these
--s1..--s12 / --rule / --rule-soft / --r / --display / --ink; here that is
--sp-1..--sp-12 / --line / --line-soft / --r-md / Bricolage / --text. Same
values, this sheet's names, per the mapping note at the top of the file.
============================================================================ */
/* -- The four-week schedule ------------------------------------------------
A definition list, not a row of four equal cards. The week number is
supporting metadata; the work is the heading. It sits INSIDE .words, so it
declares its own top margin against the paragraph above it. */
.schedule{margin-top:clamp(24px,3.5vw,40px);border-top:1px solid var(--line)}
.schedule .wk{display:grid;grid-template-columns:140px 1fr;
gap:var(--sp-4) var(--sp-8);padding-block:var(--sp-6);
border-bottom:1px solid var(--line-soft);align-items:baseline}
.schedule .when{font-size:15px;color:var(--muted)}
.schedule h3{margin:0 0 var(--sp-2);font-family:'Bricolage Grotesque',sans-serif;
font-weight:600;font-size:18px;letter-spacing:-0.01em}
.schedule .did{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
/* -- Component library -----------------------------------------------------
Column flow, not a fixed-row grid. The ten crops run 0.21 to 6.08 in aspect
ratio, so span classes never sum to a whole number of rows and dense flow
leaves a four-tile void. Columns let each tile take exactly the height its
image needs at the column width. The one component too wide for a column
(the totals row, 6.08) is pulled out above as .comp-lead. */
.comp-lead{margin-top:clamp(24px,3.5vw,40px)}
.comp-grid{margin-top:var(--sp-3);columns:3;column-gap:var(--sp-3)}
/* gap matters only for the totals lead, which carries three sibling images in
one cell; every other .comp holds a single image and is unaffected. wrap so
the three cards stack instead of squeezing on a phone. */
.comp{background:var(--surface);border-radius:var(--r-md);
display:flex;align-items:center;justify-content:center;
flex-wrap:wrap;gap:var(--sp-3);
padding:var(--sp-4);break-inside:avoid;margin-bottom:var(--sp-3)}
/* The cap is for the toolbar, 410x1972: at a 380px column it would otherwise
render a tile nearly two thousand pixels tall. This sheet has NO global
img{max-width:100%}, so the cap has to be stated on both axes here. */
.comp img{max-width:100%;max-height:440px;width:auto;height:auto}
.comp-lead .comp{margin-bottom:0}
/* The control is a light-only exploration, so var(--surface) was enough there.
Here --surface goes to #1B1F23 in dark, and these crops are transparent PNGs
whose label text is coloured for a white canvas — the cart line item, the
field labels and the option text all dropped to unreadable grey-on-grey.
Pinning the plate to the light --surface value keeps the tile identical in
both themes, which is both what the control renders and the same call the
old .component-card mosaic documents a few hundred lines up. */
[data-theme="dark"] .comp{background:#FBFCFA}
/* -- Interface subsystems --------------------------------------------------
Whole screens, grouped by the part of the business they belong to. Two up:
a full application screen at 1.5:1 stops being readable much below half the
container. Distinct from .subsystems/.subsystem-tag, which the other case
studies still use. */
.subsys{margin-top:clamp(28px,4vw,44px)}
.subsys + .subsys{margin-top:clamp(32px,4.5vw,52px)}
.subsys h3{margin:0 0 var(--sp-4);font-family:'Bricolage Grotesque',sans-serif;
font-weight:600;font-size:clamp(17px,2vw,20px);letter-spacing:-0.01em}
.subsys .screens{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,1fr)}
.subsys figure{margin:0}
.subsys img{width:100%;height:auto;display:block;
border-radius:var(--r-md);background:var(--surface)}
.subsys figcaption{margin-top:var(--sp-2);font-size:14px;line-height:1.5;
color:var(--muted);max-width:60ch}
/* -- Palette ---------------------------------------------------------------
Label under the swatch, on the page ground, rather than set inside the chip.
Text on a brand colour has to be re-measured for every colour in the set and
two of these three would need a different ink; putting the label outside
sidesteps a contrast problem instead of solving it three times. */
.palette{margin-top:clamp(24px,3.5vw,40px);display:grid;gap:var(--sp-5);
grid-template-columns:repeat(3,1fr)}
.palette .chip{height:96px;border-radius:var(--r-md);background:var(--c)}
.palette .nm{display:block;margin-top:var(--sp-3);font-weight:500;font-size:16px}
.palette .hx{display:block;font-size:14px;color:var(--muted)}
/* -- Adjacency joins for the four above ------------------------------------
Declared here, never as inline margins on the components. .comp-lead,
.comp-grid, .subsys, .schedule and .palette each set their own margin-top,
which covers every pairing this page actually produces; what is NOT covered
is a .band sitting directly above them, because .band declares only its own
top margin. */
.band + .comp-lead, .band + .comp-grid,
.band + .subsys, .band + .palette{margin-top:var(--sp-10)}
@media (max-width:900px){
.subsys .screens{grid-template-columns:1fr}
.schedule .wk{grid-template-columns:1fr;gap:var(--sp-2)}
}
@media (max-width:560px){
/* One column: a component crop in a third of a 360px screen is 110px wide
and stops being a component and starts being a smudge. */
.comp-grid{columns:1}
.comp img{max-height:340px}
.palette{grid-template-columns:1fr;gap:var(--sp-4)}
.palette .chip{height:72px}
}
/* -- Two fidelity gaps against the control, both measured -------------------
Found by putting the rendered pages side by side, not by reading the CSS.
1. A bare
inside .words or .twocol had NO typography of its own. It fell
through to the UA: 16px, line-height:normal, and a 16px margin top and
bottom that is off the 4pt grid. Beside it .cs-body renders at
clamp(16px,1.6vw,18px)/1.65, so the same page carried two different body
sizes depending on which container a paragraph happened to sit in. The
control sets body{font-size:17px;line-height:1.6} and p{margin:0}
globally; matching that here without repainting the homepage means
declaring it on the two containers that actually hold bare prose. The
existing `p + p{margin-top:var(--sp-5)}` joins still supply the rhythm.
Measured before: 16px/normal, mt:16px mb:16px.
Measured after: 17px/1.6, mt:0 mb:0.
2. Band figure images had a radius but no ground under them. Every image on
the control sits on a --surface plate, which is invisible under an opaque
screenshot and is the whole component under a transparent PNG: the Lucrum
wordmark rendered as bare artwork floating on the page ground instead of
as a card. Added to the SAME narrow selector the radius already uses —
`> figure:not([class]) >` — because a bare `.band .media img` also catches
images inside components that ground themselves, which has broken this
layout before. */
.band .words p,
.twocol > p,
.twocol > div > p{margin:0;font-size:clamp(16px,1.6vw,17px);line-height:1.6}
/* Resetting the UA margin above removes the only thing that was separating two
paragraphs inside a .twocol column, and they rendered as one run-on block.
.band .words already had this join; .twocol never did, because until now it
was riding on the UA margin it should not have been riding on. Caught by
opening the crop, not by any of the mechanical gates — all of which stayed
green through it. */
.twocol > p + p,
.twocol > div > p + p{margin-top:var(--sp-5)}
.band .media > figure:not([class]) > img,
.band .media > .pair > figure:not([class]) > img{background:var(--surface)}
/* -- Work rows: make the row the target, and say so at rest ----------------
Measured before this change: the only clickable thing in a work row was the
eight characters of the title, the thumbnail was inert, and nothing on the
row carried any affordance until the pointer was already on the title
(rest state: text-decoration none, colour = body text). Readers had no way
to know where to click.
A stretched pseudo-element on the REAL makes the whole row the hit
target while keeping exactly one link in the accessibility tree, and keeps
cmd-click and middle-click working. A would break all three,
and is on the web-interface-guidelines anti-pattern list. */
.project{position:relative}
.project .title h3 a::after{content:"";position:absolute;inset:0;z-index:1}
/* The external "Live product" link sits above the overlay or it becomes
unreachable — it is the one other link inside the row. */
.project .facts a{position:relative;z-index:2}
/* The affordance at REST, which is the half that was missing. Hover-only
affordances do not help a reader who has not moved the pointer yet. */
.project .cue{display:inline-flex;align-items:center;gap:var(--sp-2);
margin-top:var(--sp-5);font-size:15px;font-weight:500;color:var(--accent)}
.project .cue .arw{transition:transform .18s ease}
/* Hovering anywhere on the row moves the arrow and underlines the title, so
the row reads as one object rather than as text that happens to be a link. */
.project:hover .cue .arw{transform:translateX(4px)}
.project:hover .title a{text-decoration:underline;text-decoration-thickness:2px;
text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.project .cue .arw{transition:none}
.project:hover .cue .arw{transform:none}}
/* ============================================================================
EXTENDED WORK (work/extended.html)
A showcase tier, not case studies. One column per project, screens in a
horizontal snap strip.
============================================================================ */
.xw-head{display:grid;grid-template-columns:7fr 5fr;gap:var(--sp-6);align-items:start}
.xw-head .facts{margin-top:0;display:flex;flex-direction:column;gap:var(--sp-2);
font-size:15px;color:var(--muted)}
.xw-head .facts a{color:var(--accent)}
@media (max-width:900px){.xw-head{grid-template-columns:1fr;gap:var(--sp-5)}
.xw-head .facts{flex-direction:row;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6)}}
/* -- The strip -------------------------------------------------------------
Scroll-snap, not a JS carousel. Snap gives touch, trackpad and keyboard for
free, needs no script, and has nothing to disable under reduced motion
because it never animates on its own. A carousel would also be the loudest
thing on a site that deliberately removed its scroll reveals and marquee.
tabindex + role + aria-label because Firefox and Safari do not make a scroll
container keyboard focusable on their own, the same reason .flow-chart has
them. scroll-padding matches the wrap gutter so a snapped item does not sit
flush against the edge. */
.screens-strip{
margin-top:clamp(24px,3.5vw,40px);
display:flex;gap:var(--sp-5);
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-padding-left:2px;
padding-bottom:var(--sp-4);
-webkit-overflow-scrolling:touch}
.screens-strip > figure{flex:0 0 auto;margin:0;scroll-snap-align:start}
.screens-strip:focus-visible{outline:2px solid var(--text);outline-offset:4px;
border-radius:var(--r-md)}
.screens-strip figcaption{margin-top:var(--sp-3);font-size:14px;line-height:1.5;
color:var(--muted);max-width:34ch}
/* -- Phone frame -----------------------------------------------------------
A bezel and a radius, nothing else. The screenshots already carry their own
status bar, so drawing a notch or a Dynamic Island on top would render two
of them. Source is 860x1864, iPhone 14 Pro Max at 2x, so the screen keeps
that exact ratio and the frame is built outward from it with padding. */
.phone{width:clamp(210px,26vw,272px)}
/* The bezel is a BORDER, not padding, so the screen's corner radius is derived
(34 - 8 = 26px) instead of being a second declared value. That matters: the
taste skill caps a page at three distinct radii, and declaring 34 and 26
separately put this page at four and failed the shape-consistency check.
One number, and the inner curve falls out of the geometry the way it does on
the real object.
34px itself is off the one-radius scale on purpose, the same exemption
--r-pill gets for things that are genuinely circular: a bezel radius is a
fact about a physical object, and snapping it to 10px would draw a rectangle
and call it a phone. */
.phone-screen{
border:8px solid #0c0e10;
border-radius:34px;
background:#0c0e10;
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);
overflow:hidden}
.phone-screen img{
width:100%;height:auto;display:block;
background:var(--surface)}
[data-theme="dark"] .phone-screen{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16)}
/* -- Browser frame ---------------------------------------------------------
Lexer is a website. Its captures are 3072px wide and up to 17046px tall,
cropped to a 3:2 window on the top of each page, which is what a visitor
lands on. A phone frame would have been the wrong object entirely. */
.web{width:clamp(280px,52vw,560px)}
.web-bar{
display:flex;align-items:center;gap:var(--sp-2);
background:var(--surface);
padding:var(--sp-2) var(--sp-3);
border-radius:var(--r-md) var(--r-md) 0 0;
box-shadow:inset 0 -1px 0 var(--line)}
.web-bar span{width:8px;height:8px;border-radius:50%;background:var(--line);
display:block}
.web img{width:100%;height:auto;display:block;
border-radius:0 0 var(--r-md) var(--r-md);background:var(--surface)}
/* Vertical rhythm, declared here rather than as inline margins on the page. */
.xw .cs-body + .facts{margin-top:var(--sp-5)}
.xw-head + .screens-strip{margin-top:clamp(24px,3.5vw,40px)}
/* The pointer to the second tier. Sits after the work rows, deliberately quiet:
it is a doorway, not a fifth project, and giving it a row of its own would
put it in competition with work that carries real numbers. */
.more-work{margin:clamp(32px,4.5vw,52px) 0 0;padding-top:var(--sp-6);
border-top:1px solid var(--line-soft);
font-size:clamp(16px,1.6vw,17px);line-height:1.6;color:var(--muted)}
.more-work a{color:var(--accent);text-decoration:none;
display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px}
.more-work a:hover{text-decoration:underline;text-decoration-thickness:2px;
text-underline-offset:3px}
.more-work .arw{transition:transform .18s ease}
.more-work a:hover .arw{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.more-work .arw{transition:none}
.more-work a:hover .arw{transform:none}}
/* Rights fine print. Its own line under the copyright row rather than a third
item squeezed into it: flex-basis 100% forces the wrap. --muted measures
5.43:1 on the light ground and 6.88:1 on the dark one (scripts/contrast.mjs),
both clear of the 4.5:1 floor for body text, so it is quiet without being
unreadable. */
/* NO max-width here, deliberately. A max-width clamps a flex item's hypothetical
main size BEFORE the line-breaking step, so `flex-basis:100%` with
`max-width:70ch` resolved to 603px, fitted beside the other two items and
never wrapped. The rule looked correct and the row looked wrong. Full width
is right anyway: it is one line of fine print, not a paragraph to read. */
.colophon .fineprint{flex:1 0 100%;margin-top:var(--sp-3);
font-size:13px;line-height:1.6;color:var(--muted)}
carries the UA's 1em margin, which lands at 21px and 15px here and off the 4pt grid — invisible in the source, caught only by measuring the rendered page. */ .cs-head .lede{margin:var(--sp-6) 0 0} .verify{margin:var(--sp-3) 0 0} .pull + .verify{margin-top:var(--sp-4)} /* ============================================================================ LUCRUM CONTROL COMPONENTS Ported 2026-09-01 from explore/practice/assets/practice.css when the live Lucrum page was rebuilt as a literal copy of the control. .band, .twocol, .clients .roster-grid and .twocol .reflection-quote came across in the earlier migration; these four did not, and the copy needs all four. Token names are translated, not copied. Practice calls these --s1..--s12 / --rule / --rule-soft / --r / --display / --ink; here that is --sp-1..--sp-12 / --line / --line-soft / --r-md / Bricolage / --text. Same values, this sheet's names, per the mapping note at the top of the file. ============================================================================ */ /* -- The four-week schedule ------------------------------------------------ A definition list, not a row of four equal cards. The week number is supporting metadata; the work is the heading. It sits INSIDE .words, so it declares its own top margin against the paragraph above it. */ .schedule{margin-top:clamp(24px,3.5vw,40px);border-top:1px solid var(--line)} .schedule .wk{display:grid;grid-template-columns:140px 1fr; gap:var(--sp-4) var(--sp-8);padding-block:var(--sp-6); border-bottom:1px solid var(--line-soft);align-items:baseline} .schedule .when{font-size:15px;color:var(--muted)} .schedule h3{margin:0 0 var(--sp-2);font-family:'Bricolage Grotesque',sans-serif; font-weight:600;font-size:18px;letter-spacing:-0.01em} .schedule .did{margin:0;font-size:16px;line-height:1.6;color:var(--muted)} /* -- Component library ----------------------------------------------------- Column flow, not a fixed-row grid. The ten crops run 0.21 to 6.08 in aspect ratio, so span classes never sum to a whole number of rows and dense flow leaves a four-tile void. Columns let each tile take exactly the height its image needs at the column width. The one component too wide for a column (the totals row, 6.08) is pulled out above as .comp-lead. */ .comp-lead{margin-top:clamp(24px,3.5vw,40px)} .comp-grid{margin-top:var(--sp-3);columns:3;column-gap:var(--sp-3)} /* gap matters only for the totals lead, which carries three sibling images in one cell; every other .comp holds a single image and is unaffected. wrap so the three cards stack instead of squeezing on a phone. */ .comp{background:var(--surface);border-radius:var(--r-md); display:flex;align-items:center;justify-content:center; flex-wrap:wrap;gap:var(--sp-3); padding:var(--sp-4);break-inside:avoid;margin-bottom:var(--sp-3)} /* The cap is for the toolbar, 410x1972: at a 380px column it would otherwise render a tile nearly two thousand pixels tall. This sheet has NO global img{max-width:100%}, so the cap has to be stated on both axes here. */ .comp img{max-width:100%;max-height:440px;width:auto;height:auto} .comp-lead .comp{margin-bottom:0} /* The control is a light-only exploration, so var(--surface) was enough there. Here --surface goes to #1B1F23 in dark, and these crops are transparent PNGs whose label text is coloured for a white canvas — the cart line item, the field labels and the option text all dropped to unreadable grey-on-grey. Pinning the plate to the light --surface value keeps the tile identical in both themes, which is both what the control renders and the same call the old .component-card mosaic documents a few hundred lines up. */ [data-theme="dark"] .comp{background:#FBFCFA} /* -- Interface subsystems -------------------------------------------------- Whole screens, grouped by the part of the business they belong to. Two up: a full application screen at 1.5:1 stops being readable much below half the container. Distinct from .subsystems/.subsystem-tag, which the other case studies still use. */ .subsys{margin-top:clamp(28px,4vw,44px)} .subsys + .subsys{margin-top:clamp(32px,4.5vw,52px)} .subsys h3{margin:0 0 var(--sp-4);font-family:'Bricolage Grotesque',sans-serif; font-weight:600;font-size:clamp(17px,2vw,20px);letter-spacing:-0.01em} .subsys .screens{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,1fr)} .subsys figure{margin:0} .subsys img{width:100%;height:auto;display:block; border-radius:var(--r-md);background:var(--surface)} .subsys figcaption{margin-top:var(--sp-2);font-size:14px;line-height:1.5; color:var(--muted);max-width:60ch} /* -- Palette --------------------------------------------------------------- Label under the swatch, on the page ground, rather than set inside the chip. Text on a brand colour has to be re-measured for every colour in the set and two of these three would need a different ink; putting the label outside sidesteps a contrast problem instead of solving it three times. */ .palette{margin-top:clamp(24px,3.5vw,40px);display:grid;gap:var(--sp-5); grid-template-columns:repeat(3,1fr)} .palette .chip{height:96px;border-radius:var(--r-md);background:var(--c)} .palette .nm{display:block;margin-top:var(--sp-3);font-weight:500;font-size:16px} .palette .hx{display:block;font-size:14px;color:var(--muted)} /* -- Adjacency joins for the four above ------------------------------------ Declared here, never as inline margins on the components. .comp-lead, .comp-grid, .subsys, .schedule and .palette each set their own margin-top, which covers every pairing this page actually produces; what is NOT covered is a .band sitting directly above them, because .band declares only its own top margin. */ .band + .comp-lead, .band + .comp-grid, .band + .subsys, .band + .palette{margin-top:var(--sp-10)} @media (max-width:900px){ .subsys .screens{grid-template-columns:1fr} .schedule .wk{grid-template-columns:1fr;gap:var(--sp-2)} } @media (max-width:560px){ /* One column: a component crop in a third of a 360px screen is 110px wide and stops being a component and starts being a smudge. */ .comp-grid{columns:1} .comp img{max-height:340px} .palette{grid-template-columns:1fr;gap:var(--sp-4)} .palette .chip{height:72px} } /* -- Two fidelity gaps against the control, both measured ------------------- Found by putting the rendered pages side by side, not by reading the CSS. 1. A bare
inside .words or .twocol had NO typography of its own. It fell
through to the UA: 16px, line-height:normal, and a 16px margin top and
bottom that is off the 4pt grid. Beside it .cs-body renders at
clamp(16px,1.6vw,18px)/1.65, so the same page carried two different body
sizes depending on which container a paragraph happened to sit in. The
control sets body{font-size:17px;line-height:1.6} and p{margin:0}
globally; matching that here without repainting the homepage means
declaring it on the two containers that actually hold bare prose. The
existing `p + p{margin-top:var(--sp-5)}` joins still supply the rhythm.
Measured before: 16px/normal, mt:16px mb:16px.
Measured after: 17px/1.6, mt:0 mb:0.
2. Band figure images had a radius but no ground under them. Every image on
the control sits on a --surface plate, which is invisible under an opaque
screenshot and is the whole component under a transparent PNG: the Lucrum
wordmark rendered as bare artwork floating on the page ground instead of
as a card. Added to the SAME narrow selector the radius already uses —
`> figure:not([class]) >` — because a bare `.band .media img` also catches
images inside components that ground themselves, which has broken this
layout before. */
.band .words p,
.twocol > p,
.twocol > div > p{margin:0;font-size:clamp(16px,1.6vw,17px);line-height:1.6}
/* Resetting the UA margin above removes the only thing that was separating two
paragraphs inside a .twocol column, and they rendered as one run-on block.
.band .words already had this join; .twocol never did, because until now it
was riding on the UA margin it should not have been riding on. Caught by
opening the crop, not by any of the mechanical gates — all of which stayed
green through it. */
.twocol > p + p,
.twocol > div > p + p{margin-top:var(--sp-5)}
.band .media > figure:not([class]) > img,
.band .media > .pair > figure:not([class]) > img{background:var(--surface)}
/* -- Work rows: make the row the target, and say so at rest ----------------
Measured before this change: the only clickable thing in a work row was the
eight characters of the title, the thumbnail was inert, and nothing on the
row carried any affordance until the pointer was already on the title
(rest state: text-decoration none, colour = body text). Readers had no way
to know where to click.
A stretched pseudo-element on the REAL makes the whole row the hit
target while keeping exactly one link in the accessibility tree, and keeps
cmd-click and middle-click working. A would break all three,
and is on the web-interface-guidelines anti-pattern list. */
.project{position:relative}
.project .title h3 a::after{content:"";position:absolute;inset:0;z-index:1}
/* The external "Live product" link sits above the overlay or it becomes
unreachable — it is the one other link inside the row. */
.project .facts a{position:relative;z-index:2}
/* The affordance at REST, which is the half that was missing. Hover-only
affordances do not help a reader who has not moved the pointer yet. */
.project .cue{display:inline-flex;align-items:center;gap:var(--sp-2);
margin-top:var(--sp-5);font-size:15px;font-weight:500;color:var(--accent)}
.project .cue .arw{transition:transform .18s ease}
/* Hovering anywhere on the row moves the arrow and underlines the title, so
the row reads as one object rather than as text that happens to be a link. */
.project:hover .cue .arw{transform:translateX(4px)}
.project:hover .title a{text-decoration:underline;text-decoration-thickness:2px;
text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.project .cue .arw{transition:none}
.project:hover .cue .arw{transform:none}}
/* ============================================================================
EXTENDED WORK (work/extended.html)
A showcase tier, not case studies. One column per project, screens in a
horizontal snap strip.
============================================================================ */
.xw-head{display:grid;grid-template-columns:7fr 5fr;gap:var(--sp-6);align-items:start}
.xw-head .facts{margin-top:0;display:flex;flex-direction:column;gap:var(--sp-2);
font-size:15px;color:var(--muted)}
.xw-head .facts a{color:var(--accent)}
@media (max-width:900px){.xw-head{grid-template-columns:1fr;gap:var(--sp-5)}
.xw-head .facts{flex-direction:row;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6)}}
/* -- The strip -------------------------------------------------------------
Scroll-snap, not a JS carousel. Snap gives touch, trackpad and keyboard for
free, needs no script, and has nothing to disable under reduced motion
because it never animates on its own. A carousel would also be the loudest
thing on a site that deliberately removed its scroll reveals and marquee.
tabindex + role + aria-label because Firefox and Safari do not make a scroll
container keyboard focusable on their own, the same reason .flow-chart has
them. scroll-padding matches the wrap gutter so a snapped item does not sit
flush against the edge. */
.screens-strip{
margin-top:clamp(24px,3.5vw,40px);
display:flex;gap:var(--sp-5);
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-padding-left:2px;
padding-bottom:var(--sp-4);
-webkit-overflow-scrolling:touch}
.screens-strip > figure{flex:0 0 auto;margin:0;scroll-snap-align:start}
.screens-strip:focus-visible{outline:2px solid var(--text);outline-offset:4px;
border-radius:var(--r-md)}
.screens-strip figcaption{margin-top:var(--sp-3);font-size:14px;line-height:1.5;
color:var(--muted);max-width:34ch}
/* -- Phone frame -----------------------------------------------------------
A bezel and a radius, nothing else. The screenshots already carry their own
status bar, so drawing a notch or a Dynamic Island on top would render two
of them. Source is 860x1864, iPhone 14 Pro Max at 2x, so the screen keeps
that exact ratio and the frame is built outward from it with padding. */
.phone{width:clamp(210px,26vw,272px)}
/* The bezel is a BORDER, not padding, so the screen's corner radius is derived
(34 - 8 = 26px) instead of being a second declared value. That matters: the
taste skill caps a page at three distinct radii, and declaring 34 and 26
separately put this page at four and failed the shape-consistency check.
One number, and the inner curve falls out of the geometry the way it does on
the real object.
34px itself is off the one-radius scale on purpose, the same exemption
--r-pill gets for things that are genuinely circular: a bezel radius is a
fact about a physical object, and snapping it to 10px would draw a rectangle
and call it a phone. */
.phone-screen{
border:8px solid #0c0e10;
border-radius:34px;
background:#0c0e10;
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);
overflow:hidden}
.phone-screen img{
width:100%;height:auto;display:block;
background:var(--surface)}
[data-theme="dark"] .phone-screen{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16)}
/* -- Browser frame ---------------------------------------------------------
Lexer is a website. Its captures are 3072px wide and up to 17046px tall,
cropped to a 3:2 window on the top of each page, which is what a visitor
lands on. A phone frame would have been the wrong object entirely. */
.web{width:clamp(280px,52vw,560px)}
.web-bar{
display:flex;align-items:center;gap:var(--sp-2);
background:var(--surface);
padding:var(--sp-2) var(--sp-3);
border-radius:var(--r-md) var(--r-md) 0 0;
box-shadow:inset 0 -1px 0 var(--line)}
.web-bar span{width:8px;height:8px;border-radius:50%;background:var(--line);
display:block}
.web img{width:100%;height:auto;display:block;
border-radius:0 0 var(--r-md) var(--r-md);background:var(--surface)}
/* Vertical rhythm, declared here rather than as inline margins on the page. */
.xw .cs-body + .facts{margin-top:var(--sp-5)}
.xw-head + .screens-strip{margin-top:clamp(24px,3.5vw,40px)}
/* The pointer to the second tier. Sits after the work rows, deliberately quiet:
it is a doorway, not a fifth project, and giving it a row of its own would
put it in competition with work that carries real numbers. */
.more-work{margin:clamp(32px,4.5vw,52px) 0 0;padding-top:var(--sp-6);
border-top:1px solid var(--line-soft);
font-size:clamp(16px,1.6vw,17px);line-height:1.6;color:var(--muted)}
.more-work a{color:var(--accent);text-decoration:none;
display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px}
.more-work a:hover{text-decoration:underline;text-decoration-thickness:2px;
text-underline-offset:3px}
.more-work .arw{transition:transform .18s ease}
.more-work a:hover .arw{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.more-work .arw{transition:none}
.more-work a:hover .arw{transform:none}}
/* Rights fine print. Its own line under the copyright row rather than a third
item squeezed into it: flex-basis 100% forces the wrap. --muted measures
5.43:1 on the light ground and 6.88:1 on the dark one (scripts/contrast.mjs),
both clear of the 4.5:1 floor for body text, so it is quiet without being
unreadable. */
/* NO max-width here, deliberately. A max-width clamps a flex item's hypothetical
main size BEFORE the line-breaking step, so `flex-basis:100%` with
`max-width:70ch` resolved to 603px, fitted beside the other two items and
never wrapped. The rule looked correct and the row looked wrong. Full width
is right anyway: it is one line of fine print, not a paragraph to read. */
.colophon .fineprint{flex:1 0 100%;margin-top:var(--sp-3);
font-size:13px;line-height:1.6;color:var(--muted)}