/* The house sets itself in its own type. It did not: the chrome was Poppins, fetched from Google on every page, while 69 of our own woff2 sat in assets/fonts unreferenced by anything except the specimen and typefaces pages. A foundry whose interface is somebody else's face is making an argument against itself. Drew Grotesk is the text cut: it carries the tailed l, so a capital I and a lowercase l are different letters, and the accented Latin, so it can set the languages our own pages are already written in. The fallback is the system stack and nothing remote. */ @font-face{ font-family:'Drew Grotesk'; src:url('/assets/fonts/DrewGrotesk-Light.woff2') format('woff2'); font-weight:300; font-display:swap } @font-face{ font-family:'Drew Grotesk'; src:url('/assets/fonts/DrewGrotesk-Regular.woff2') format('woff2'); font-weight:400; font-display:swap } @font-face{ font-family:'Drew Grotesk'; src:url('/assets/fonts/DrewGrotesk-Bold.woff2') format('woff2'); font-weight:700; font-display:swap } /* Drew Mono is loaded for FIGURES, not for text: see --figures below. A declared face that nothing uses costs no request, so the other pages pay nothing for these two lines. */ @font-face{ font-family:'Drew Mono'; src:url('/assets/fonts/DrewMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap } @font-face{ font-family:'Drew Mono'; src:url('/assets/fonts/DrewMono-Semibold.woff2') format('woff2'); font-weight:600; font-display:swap } /* ink.css — the only stylesheet drewink.com has. Linked, never inlined. The build before this one pasted a copy into every page, so a corrected colour changed nothing that shipped and still reported success. */ :root{ --paper:#fbfbf9; /* neutral near-white. never cream. */ --ink:#111111; --grey:#4e4e4e; /* the only grey. 8.0:1 on paper, 7.4:1 on the card fill. */ /* 1.38:1 against paper. It was #e2e2e0 at 1.25:1, which is under Google's resting edge of 1.37 and is a separator that does not separate — the same fault as a card at 1.03:1, in a thinner form. Used exactly twice, on the bar's bottom and the footer's top, which is one device doing one job. Apple's answer for this boundary is different and heavier to build: reduce the background entirely and use a scroll edge effect to distinguish the control area from the content (HIG p299, Toolbars; p105, Layout). Not shipped under a review; proposed instead. */ --hair:#dad8d1; --type:#0b3d91; /* the three divisions, as fields rather than labels */ --icon:#8e3013; --logo:#12482c; --figure:#d94420; /* vermilion. marks, rules, counters. never text. */ /* The ramp is on the ladder now, and the ladder is the anti-φ one: a module of 8, and only the ratios 3:2 and 4:3, which multiply to 2:1 exactly. Every step below is a whole ratio and every value is a whole multiple of 8. The ramp it replaced — 120/44/24/18/16 — had 44:24 = 1.833 and 18:16 = 1.125 in it, which are not ratios, they are numbers that looked about right. The calculation is published in the Graphics Standards Manual, section 3.1. */ --t1:clamp(3rem,7.6vw,8rem); /* 128 — 48 × 8:3 (an octave and a fourth) */ --t2:clamp(2rem,3.6vw,3rem); /* 48 — 32 × 3:2 */ --t3:2rem; /* 32 — 24 × 4:3 */ --t4:1.5rem; /* 24 — 16 × 3:2 */ --t5:1rem; /* 16 — the floor, and the module × 2 */ /* The stack a SPECIMEN falls back to, and it is deliberately not the body font. Every font-family on the typefaces page reads `'dif-N', var(--fallback)`, and this token was used in nine places and declared in none — an undefined var() makes the whole declaration invalid at computed-value time, so the property fell back to INHERITED, which is Poppins. The page loaded all three weights correctly, reported them loaded, and then set every specimen on it in the body font: the exact failure the catalogue check was written to prevent, arriving by a route that check could not see, because the files were all present and correct. Poppins is a geometric sans too, which is what let it pass a glance. */ --fallback:ui-rounded,'SF Pro Rounded',system-ui,sans-serif; /* THE FACE THE FIGURES ARE SET IN, and it is a different question from the body face. Measured out of the shipped binaries on 2026-09-11, after David read /stats and said the face was wrong for it: Drew Grotesk gives its ten digits advances from 0.369 to 0.708 em, a 1.9:1 spread, so a column of numbers in it cannot line up. Drew Mono gives all ten one advance of 0.831 em and carries no GPOS, which is what makes a table of figures a table. `font-variant-numeric: tabular-nums` cannot stand in for this: not one of the 23 faces on the shelf has a GSUB table, so that property has never done anything on this site. This declaration is the one that decides, and a build whose figures cannot line up is refused before it ships. Numbers and dates only; a label set in a monospace is a costume. */ --figures:'Drew Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* DEPTH. A screen is layers and the eye must be able to tell what is in front of what; a coloured rectangle with a heading on it is a poster, not a page. These are the house's steps between surfaces, so every page reaches for the same ones and a reviewer can measure them. A well is a surface the page steps DOWN into: an instrument sits in one, and what it emits is the brightest thing on the page. A lift is a surface that stands UP off its ground: a control, a sheet. Two lifts, because a control at rest and a control pressed are different heights, and a page with one shadow value has one height, which is flat with extra steps. */ --well:#161618; /* 17.6:1 against paper */ --lift-1:0 1px 2px rgba(17,17,17,.22), 0 2px 6px rgba(17,17,17,.14); --lift-2:0 2px 4px rgba(17,17,17,.24), 0 8px 20px rgba(17,17,17,.18); --pad:clamp(1.5rem,4vw,3.5rem); /* 24 -> 56, both on the module */ /* THE GUTTER IS ALSO THE NOTCH. env(safe-area-inset-*) appeared ZERO times in this file until 2026-09-11, and this file is the whole of the site's CSS: drewink.com inset for no notch, no rounded corner and no home indicator anywhere. albumin-ab found it by counting the file rather than reading it, which is a lesson of its own. It is one gap in two halves: env() reads 0 unless the page says viewport-fit=cover, and no page did, so neither half was present and neither was a decision. Both went in together, because viewport-fit=cover without insets is strictly worse than what was here: the page paints under the status bar and nothing moves out of its way. A SECOND DECLARATION, on purpose. A browser too old for max() or env() drops this line and keeps the plain clamp above it, rather than losing --pad entirely and taking every gutter on the site with it. And both sides take the larger of the two insets: in landscape only one edge has a notch, but a gutter that differs left from right walks the whole page sideways. */ --pad:max(clamp(1.5rem,4vw,3.5rem), env(safe-area-inset-left,0px), env(safe-area-inset-right,0px)); --wrap:1400px; } *{ box-sizing:border-box; margin:0; padding:0 } html{ -webkit-text-size-adjust:100% } body{ background:var(--paper); color:var(--ink); font-family:'Drew Grotesk',system-ui,sans-serif; font-size:var(--t5); font-weight:400; line-height:1.5; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none } a:focus-visible,button:focus-visible{ outline:3px solid var(--ink); outline-offset:3px } [hidden]{ display:none !important } /* display:inline-block outranks the attribute otherwise */ img,svg{ display:block } /* the page measure. .field-in and footer .f each re-declare this; they are another session's and left alone, but nothing new should. */ .wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) } /* ── the shell ─────────────────────────────────────────────────────────── */ /* THE BAR IS THE FUNCTIONAL LAYER, and it is the only place on this site that gets a translucent material. The chapter is explicit about both halves: Liquid Glass "forms a distinct functional layer for controls and navigation elements — like tab bars and sidebars — that floats above the content layer", and "Don't use Liquid Glass in the content layer … Instead, use standard materials for elements in the content layer, such as app backgrounds" (HIG p122–123). So the house has three layers and one treatment each, and nothing has to be chosen between them: above content the bar translucent, content scrolls under it within content well and lift cards, fields, specimens. Never glass. the type itself nothing ink does not cast It is sticky rather than relative because a material that lets content peek through needs content to be under it. A solid strip is not a layer, it is a fence, and that is why this site read flat with a vocabulary already in it. */ /* THE BAR IS OPAQUE, AND IT USED TO BE 72 PER CENT PAPER OVER A BACKDROP BLUR. The material cost us a whole class of fault and albumin-ab measured it: adding the door put margin-left:auto in the bar, which moved the NAV from x 845..1369 to x 431..956, into the middle, where a page's own large headword sits under the glass. Dark pixels beneath the nav band went from 1,204 to 7,994 and three links fell under the 7:1 floor (Typefaces 5.28, Icons 5.82, Sorrun 6.54) while the other three passed. No colour changed anywhere. A LAYOUT change relocated existing type onto a different ground. That is not a door bug and it would not have stayed fixed by moving the door back. On a see-through bar every element's contrast depends on which page it is over AND where along the bar it sits, so every future addition to this bar, and a store header collects them, is a contrast change that nobody thinks to measure. #4e4e4e is 8.0:1 on paper and the floor is 7, which leaves one point of headroom for an arbitrary page to show through: the paper has to be about 93 per cent for the grey to hold over a near-black headword, and 93 per cent paper with a blur behind it is an opaque bar that costs a repaint. So it is an opaque bar with a hairline, which is what the @supports fallback here already drew for anyone without backdrop-filter. The house was shipping two different bars and only gating one. */ .bar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:1rem; padding:.75rem var(--pad); /* the status bar sits on top of this one now that the page covers the whole screen */ padding-top:calc(.75rem + env(safe-area-inset-top,0px)); background:var(--paper); border-bottom:1px solid var(--hair) } .brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; padding-block:.5rem; min-height:44px; font-weight:600; font-size:var(--t5) } .brand-mark{ width:30px; height:30px; border-radius:7px; overflow:hidden; flex:0 0 auto } .brand-mark svg{ width:100%; height:100% } .nav{ display:flex; gap:clamp(.9rem,2.4vw,1.8rem); flex-wrap:nowrap; justify-content:flex-end; min-width:0 } /* NOWRAP, because wrapping a nav inside a bar makes a column and the bar grows to hold it. With the door in the row, a 431px viewport built a 361px header, nine items tall. Measured 2026-09-11 by binary search with the second row switched off: the brand, the six items and the door hold one row from 715px up, which is the 44.625rem below. It was 692 until a 1px rule joined the strip to separate the four divisions from the two reading rooms, and one pixel of rule cost twenty-three pixels of viewport, because the rule also brings a gap on each side of it and the row is what has to fit. Re-run the bisection after anything enters this bar; do not adjust the number by eye. Between those two facts the nav never stacks. That bisection was run twice and the first answer, 612, was wrong in the way this file keeps being wrong. It asked whether the bar stayed one row tall and whether the document scrolled sideways; both said yes at 612, and at 612 "Typefaces" was sitting ON TOP OF "Drew Ink". A nowrap flex item overflows its shrunken box silently and neither of those two questions can see it. The test that holds asks what was actually wanted: does every link clear the brand and the door by a real gap. */ .nav a{ min-height:44px; display:flex; align-items:center; color:var(--grey); font-size:var(--t5); font-weight:500 } .nav a:hover,.nav a[aria-current]{ color:var(--ink) } /* WHICH OF THESE SELLS YOU SOMETHING. The store brief's fault, in its own words: two of the six words mean nothing to a visitor, and a person who lands here cannot tell which of Sorrun and Wuka has anything for sale. Sorrun does, it is the sound foundry; Wuka and the manual are reading. Renaming was never the answer: Wuka is his own recorded name at data/wiki/NAME.md and Sorrun is the division's name, so the words stay and the ROOM changes. Four divisions, then a rule, then the two places you go to read. It is a mark rather than a label, because a header that has to explain its own grouping in words has not grouped anything. */ .nav-turn{ flex:0 0 auto; align-self:center; width:1px; height:1.1rem; background:var(--hair) } /* THE NAV STOPPED SHRINKING ON 2026-09-10, AFTER THREE ROUNDS OF IT. The block that stood here is worth reading in the history: 14px when Sorrun made five items, 13px when the wiki made six, then 12px, each time measured honestly and each time buying fit with legibility. It even said so — "shrinking the nav to make it fit would be solving a layout problem with legibility" — one paragraph before doing it, and it named the real fault too: six top-level destinations is past the ceiling and that is a roster decision, not a CSS one. 12px is under this house's own 16px floor. A seventh destination would have bought the fourth shrink. So the type stays at 16 and the row scrolls instead, bled to the page edge so an item cut by the right margin is what says there is more of it — the same device the wiki's filter bar uses, proven on a real phone the same morning. Nothing is hidden behind a tap, which is the one thing a navigation must never do. And the WIDTH floor applies everywhere, not only on a phone. "Wiki" measured 34x44 at 820 and at 1440: the height was right, the target was not, and both WCAG 2.5.8 and the HIG size the whole thing. Found on the logos page by another window and true on every page in the house. */ .nav a{ min-width:44px; justify-content:center } /* THE COMMERCIAL DOOR. A store header answers three questions: where am I, what is for sale, and how do I pay. The mark answers the first and the nav answers the second; this is the third, and until now the site had no answer to it at all: twenty-one rows reading Free and no way to buy anything. It sits OUTSIDE the nav on purpose. The nav is a scroll strip on a phone and anything inside it can be scrolled out of reach; the one link a store must never lose is the one that takes money. So it is a sibling, it never shrinks, and the shelves give up width before it does. */ .door{ flex:0 0 auto; margin-left:auto; display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 .95rem; border-radius:999px; background:var(--ink); color:var(--paper); text-decoration:none; font-size:var(--t5); font-weight:600; white-space:nowrap; } .door:hover{ background:var(--figure) } .door[aria-current]{ background:var(--figure) } @media (max-width:44.625rem){ /* TWO ROWS, AND THE ONE-ROW RULE THAT STOOD HERE IS WHY. It read: "the nav already scrolls sideways, so it does not need a line of its own; it shares the brand's", measured true at a 254px strip, and rejected wrapping because wrapping cost 187 CSS px of header before any page's content (Pinterest signed in on this phone puts its first picture at 10px). Then the commercial door was added to the bar and took 158 of 390, forty per cent of the viewport for one link, and the strip it shared the row with fell to a 60px window with NOT ONE nav item whole in it. The premise the one-row rule rested on was gone. The door was measured for reach (129 pages carry it) and never for cost, which is this week's fault in a new coat: an instrument answering the question next to the one asked. So below 715px, bisected rather than chosen, the brand and the door hold the top row and the strip gets the full width underneath. The header is 117px, not the 187 that was refused, because the row heights are pinned by the 44px target floor and nothing else. Five of six items are whole and the sixth is cut by the right margin, which is the device saying there is more. */ .bar{ flex-wrap:wrap; row-gap:.35rem; padding-block:.45rem; gap:.75rem; padding-top:calc(.45rem + env(safe-area-inset-top,0px)) } .brand{ margin-right:auto; flex:0 0 auto } .nav{ order:3; flex:1 0 100%; width:100%; min-width:0; justify-content:flex-start; gap:.9rem; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad) } .nav::-webkit-scrollbar{ display:none } .nav a{ flex:0 0 auto; white-space:nowrap } /* Only the padding changes here. The door is set at the nav's own size at EVERY width, not a step above it: it is a filled pill in a bar of plain links, which is already the most prominent thing in the header, and a store that is meant to read as a studio rather than a pitch does not also need the pay link a size larger than everything else. At t4/600 it measured 158px on a 390 viewport, forty per cent of the screen, which is how it ate the shelves. */ .door{ margin-left:0; padding:0 .7rem } } /* THE CUT NEEDS TO SAY IT IS A CUT. A stranger's eye read the row clipping at "W" as a broken bar rather than a swipeable one. albumin-88's words, and a scroll region with no scrollbar and no soft edge does look like a mistake. 32.25rem is 516px and it is BISECTED against the strip itself, asking scrollWidth against clientWidth at every width the strip can take: cut up to 516, whole from 517. IT SAID 529 FOR AN EVENING AND THAT WAS THE FALLBACK FACE. The bisection slept and measured whatever was on screen, which the first time was the system stack and not Drew Grotesk, thirteen pixels apart, and this stylesheet carried the wrong one of the two. It waits for the face now. Anything measured off text is measured twice, once before the face loads and once after, and only the second is a measurement. That fault was found on the front page the same evening and then committed again inside the tool written to stop it. Derived twice before that and wrong both times, in opposite directions, because the arithmetic has three parts that each move with the viewport (the gap, the page margins, and whether scrollWidth already contains them) and I got a different pair wrong each time. The fade must be present exactly where the row is cut, or it is a device announcing more of something there is no more of, so the number is asked of the page rather than worked out about it. It has moved once already, from a six-item row to a six-item row with a 1px rule in it, and it will move again the day a seventh item lands. The bisection is the thing to re-run, not the arithmetic. It prints both breakpoints with the max-width to put in this file, and a sweep saying at nine widths whether the fade is present exactly where the row is cut. The block also used to sit inside the phone query and inherit that query's width by accident, which is how a device that is only honest at one width ends up applied across a range. */ @media (max-width:32.25rem){ .nav{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 2.5rem), transparent) } } /* ── the division fields: colour as structure, not as an accent ────────── */ .field{ color:var(--paper); padding:clamp(3rem,9vh,6rem) var(--pad); min-height:86vh; display:flex; align-items:center } /* Each division owns a screen-turn rather than a stripe in a bundle. Two colours are then never in one window, which is the condition a stack of bands needs in order to be read as one striped object at all. Measured, not assumed: at 390 the fields were 92% of a window with 0.54 evenness against a 0.55 threshold, which is a near-miss and not a fix. */ /* A LONE FIELD IS NOT A SCREEN-TURN, because there is nothing on the page to turn away from. 86vh was measured on index.html, where the three bands are stacked and the condition that stops a stack reading as one striped object is that two colours are never in one window. icons.html and logos.html carry exactly ONE field each: the whole page is that division, nothing follows the colour but the catalogue, and the 86vh was buying a property those pages already had. It cost 0.86 of a phone screen on icons and 1.13 on logos, ahead of the shelves, which is the scroll before the thing you came for. The field keeps its colour, its type and its marks; it is simply as tall as what is in it. */ .field--one{ min-height:0 } .field--type{ background:var(--type) } .field--icon{ background:var(--icon) } .field--logo{ background:var(--logo) } .field-in{ max-width:var(--wrap); margin:0 auto; width:100% } /* The field became a flex container when each division was given a screen-turn, and a flex item does not stretch to its container by default: the inner block collapsed to its content and the goods inside it wrapped at two across on a 1440 screen. */ .field h2{ font-size:var(--t2); font-weight:700; letter-spacing:-.03em; line-height:.95; margin-left:-.03em } .field p{ font-size:var(--t4); margin-top:.7rem; max-width:44ch } /* THE HEADING IS THE WAY IN AND IT LOOKS LIKE ONE. A rule under it rather than a pill beside it: HOUSE.md ruling 5 says what must not arrive with selling is the furniture, and a heading with a line under it is how a printed page has marked a reference for four hundred years. It is not an underline on hover, because a link that only announces itself to a mouse announces itself to nobody on a phone. */ .field h2 a{ color:inherit; text-decoration:none; border-bottom:3px solid currentColor; padding-bottom:.06em } .field h2 a:hover{ border-bottom-color:var(--figure) } .field h2 a:focus-visible{ outline:3px solid var(--paper); outline-offset:4px } .field .n{ font-size:var(--t3); font-weight:600; margin-top:1.6rem; display:block } /* THE PILL AND ITS PLAIN FORM BOTH WENT WITH THE CONTROL THEY DRESSED (2026-09-11). Nine rules for a.go inside a field, and a field has no a.go any more: the heading is the way in and the count is the second one. 404.html and sorrun both still carry a .go and both style it themselves, so nothing here was holding them up; they were never inside a .field and never matched any of this. Checked before deleting rather than after. */ /* DEPTH, 2026-09-09. A field was one colour plane with white ink printed on it, which is a poster. Now the field is the well the division sits in, and what the division holds lifts out of it on one paper sheet: the goods in the division's own hue, the count, and the one filled control on that screen, in the same hue, which is the way into the division. The heading stays on the well as ink; the sheet carries what you can take away. Three levels here, ground, well, sheet, counted down one column: paper, the field a step down, the sheet a step up, and the control on the sheet at the sheet's own height. The sheet is absent from the plate above, which is the corpus itself and needs no case. */ /* A sheet that fills the screen stops separating and becomes the screen: at 1440 it ran 1313px, nine tenths of the viewport. Its width comes from what it holds, 60rem at most, two thirds of 1440 and half of 1920, and the field shows around it. */ .field .sheet{ background:var(--paper); color:var(--ink); border-radius:20px; margin-top:1.4rem; padding:clamp(1.2rem,3vw,2rem); box-shadow:var(--lift-1); max-width:min(100%,60rem); } .field--type .sheet .goods{ color:var(--type) } .field--icon .sheet .goods{ color:var(--icon) } .field--logo .sheet .goods{ color:var(--logo) } .field .sheet .goods{ margin-top:0 } /* the count on the sheet is a link as well as a fact, because it is the one thing the field cannot show and the place a reader's eye lands after the sample */ .field .sheet a.n{ color:var(--ink); margin-top:1.4rem; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; border-bottom:3px solid currentColor; padding-bottom:.06em } .field--type .sheet a.n:hover, .field--icon .sheet a.n:hover, .field--logo .sheet a.n:hover{ border-bottom-color:var(--figure) } .field .sheet a.n:focus-visible{ outline:3px solid var(--ink); outline-offset:3px } /* ── type ──────────────────────────────────────────────────────────────── */ h1{ font-size:var(--t1); font-weight:700; letter-spacing:-.04em; line-height:.88; margin-left:-.03em } .lede{ font-size:var(--t3); max-width:40ch; line-height:1.4 } .meta{ color:var(--grey); font-size:var(--t5) } /* ── footer ────────────────────────────────────────────────────────────── */ /* THE FOOTER DOES NOT DECLARE A GROUND, AND THAT IS DELIBERATE NOW RATHER THAN BY DEFAULT. It was given background:var(--paper) on 2026-09-11 to fix manual/2026, whose body is a desk grey #e9e9e6 that dropped the shared footer's #4e4e4e to 6.84:1 against a floor of 7. The fix broke the wiki's glassmorphism entry in the same run, 1.04:1: that page reverses its footer, and paper under paper-coloured type is the same colour. A blanket ground on a shared element is not a class fix, it is a second page's bug. The room that repainted itself repaints its own footer. */ /* a colophon is the document's own note about itself and sits at the end of the document, not in the house footer; it was three lines inside the manual's footer, which is what made that footer the one copy nobody could share */ .colophon{ max-width:62ch; margin:clamp(2rem,5vh,3rem) auto 0; padding:0 var(--pad); font-size:1rem; line-height:1.5; color:var(--grey) } footer{ border-top:1px solid var(--hair); margin-top:0 } footer .f{ max-width:var(--wrap); margin:0 auto; padding:2.2rem var(--pad) 3rem; /* the home indicator is a bar drawn across the bottom of the page, not below it */ padding-bottom:calc(3rem + env(safe-area-inset-bottom,0px)); color:var(--grey); font-size:var(--t5); line-height:1.9 } footer .f b{ color:var(--ink); font-weight:600 } /* ── specimen ─────────────────────────────────────────────────────────── The specimen page carries its own layout; what is left here is the one thing that has to look the same wherever a drawing fails to arrive. */ .spec-fail{ border-left:6px solid var(--figure); padding:1rem 0 1rem 1.2rem; max-width:60ch } .spec-fail b{ display:block; font-size:var(--t3); font-weight:600; margin-bottom:.4rem } .spec-fail code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--t5); word-break:break-all; color:var(--ink) } /* the index: a head that informs, then the faces as cards — each set in its own drawing over a ground, the way the reference puts the product on the first screen */ .ix-head{ padding-block:clamp(3rem,8vh,5.5rem) clamp(1.6rem,4vh,2.6rem) } .facts{ display:flex; gap:clamp(1.4rem,3.5vw,2.6rem); margin-top:clamp(1rem,2.5vh,1.6rem); flex-wrap:wrap; align-items:baseline } .facts div{ display:flex; align-items:baseline; gap:.55rem } /* A value never stands on its own. The unit is the label, printed, because it is one word and it makes the number exact — Munari, p019: "communication must be instant and it must be exact." A mark would be shorter; ours does not read at this size yet, and a mark that has to be deciphered is neither. */ .facts dt{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) } .facts dd{ font-size:var(--t2); font-weight:700; letter-spacing:-.03em; line-height:1; display:flex; align-items:baseline; gap:.4rem } .facts dd span{ font-size:var(--t4); font-weight:500; color:var(--grey); letter-spacing:0 } .facts--small dd{ font-size:var(--t4); font-weight:600 } .field .facts dd{ color:var(--paper) } /* NO DIM. The unit label was paper at .78, which measures 6.51:1 on the typefaces field, 5.39 on icons and 6.91 on logos, against a house floor of 7:1 that the stylesheet declaring it is the only place anybody would look for. Every opacity that clears the floor on all three is 1, because the rust field is the worst and only reaches 7.85 at full strength, so the dimming is deleted rather than tuned. The label is already a step down the ramp and two weights lighter than the figure; that is the hierarchy, and it needed no help from a lower contrast. */ .field .facts dd span{ color:var(--paper) } .facts--small .i{ width:1.5em; height:1.5em } .i{ width:1.5em; height:1.5em; flex:0 0 auto; color:var(--grey) } .bit{ display:inline-flex; align-items:baseline; gap:.35rem; font-size:var(--t4); font-weight:600; color:var(--ink) } .bit span{ font-weight:500; color:var(--grey) } .bit .i{ width:1.5em; height:1.5em; color:var(--grey) } .bit--p{ font-weight:700 } .facts .i{ width:2.2em; height:2.2em; color:var(--ink) } .ix-head h1{ font-size:clamp(2.6rem,7.6vw,6rem); line-height:.9; letter-spacing:-.04em; margin-left:-.03em } /* The card is a module, and every module is the same size because its content is always exactly two characters. Vignelli, the Canon p40: graphic design is "the organization of information", and a grid "provides consistency… an orderly look"; p92: "in typography the white space is more important than the black of the type … white space not only separates the different parts of the message but helps to position the message in the context of the page." So: no cell, no fill, no rule — a regular module, and space between. Munari p028 wants a sign read ALONE; at a thousand that value is bought on the specimen page, one click away, not here. A saturated ground would also lie about the face: reversed out, a stem optically spreads, so the drawing shown is not the drawing bought. */ .card{ display:grid; gap:.35rem; align-content:start; container-type:inline-size } .card-art{ display:grid; place-items:end start } .card-set{ color:var(--ink); font-size:clamp(2.25rem,42cqi,5.5rem); line-height:1.06; letter-spacing:-.02em; margin-left:-.03em; white-space:nowrap } /* A face whose drawing did not arrive says so by going quiet — it never borrows the look of a face that did. */ .card--bare .card-set{ font-family:var(--fallback) !important; color:var(--grey) } .card-n{ font-size:var(--t4); font-weight:600; letter-spacing:-.01em; line-height:1.2 } .card-foot{ display:flex; align-items:baseline; gap:.5rem .9rem; flex-wrap:wrap } .card:hover .card-set{ color:var(--figure) } /* the letter a name is filed under, standing across the whole shelf */ .group{ grid-column:1 / -1; font-size:var(--t2); font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--ink); padding-top:clamp(1.4rem,3.5vh,2.4rem) } .group:first-child{ padding-top:0 } .more{ display:grid; place-items:center; padding:clamp(2rem,5vh,3rem) 0 } .soon{ color:var(--grey); font-size:var(--t4); max-width:46ch; padding:clamp(1.5rem,4vh,2.5rem) 0 } .soon b{ display:block; color:var(--ink); font-weight:600; font-size:var(--t3); margin-bottom:.4rem; letter-spacing:-.02em }