/* ===================================================================== SEALED — production stylesheet. GENERATED by scripts/build-css.mjs. DO NOT HAND-EDIT: edit web/preview/intaglio/{tokens,system,surface-app}.css and re-run `npm run web:css`. A fix made only here is lost on the next build; a fix made only there never reaches production. The colourway switcher (colourways.css / colourways.js) is preview-only and deliberately absent — the chosen field lives in the tokens below. ===================================================================== */ /* ===================================================================== SEALED — DIRECTION 5: "INTAGLIO" tokens.css — the whole vocabulary. Nothing below is decorative for its own sake; every token exists because the composition needs it. THESIS IN ONE LINE A seal's entire meaning is that it is destroyed by being opened. So the page IS the seal: one inked sheet, edge to edge, with four apertures cut through it. Everything Sealed will actually show you — a run, the price, the catalogue, the one action — is a hole in the sheet. Everything else is material. WHAT THIS FORCES, AND WHY THE TOKEN SET IS SO SHORT · There is no accent colour. Inside a flood, a second hue would be an accent applied to an accent. Emphasis is carried by INK OPACITY (86 → 100) and by the WIDTH AXIS of the typeface (wdth 100 → 112). · There are four type sizes on the entire page: 13 / 17 / 34 / 96. · Radii are 0 everywhere except the two receipt notches. · There are no shadows. A cut is drawn with a dark edge and a lit edge, never with a blur. · Dark mode is not a mode. The flood IS the mode; there is one page. ===================================================================== */ /* --------------------------------------------------------------------- FONTS — SELF-HOSTED. No CDN request, so the fallback below is a genuine last resort rather than a routine outcome: Google Fonts is blocked outright in some regions and by many corporate proxies and privacy tools, and the failure was total (see the font-stretch/font-weight note in section 3). Verified identical to the CDN build — font-stretch 112% measures 225.2px and font-weight 800 measures 228.63px on both, and both axes stay live. --------------------------------------------------------------------- */ @font-face{ font-family:"Archivo"; src:url("/public/fonts/archivo-latin.woff2") format("woff2"); font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Archivo"; src:url("/public/fonts/archivo-latin-ext.woff2") format("woff2"); font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Departure Mono"; src:url("/public/fonts/departure-mono.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Archivo Fallback"; src:local("Helvetica Neue"),local("Arial"),local("Liberation Sans"); size-adjust:97%; ascent-override:92%; descent-override:24%; line-gap-override:0%; } @font-face{ font-family:"Departure Fallback"; src:local("Menlo"),local("Consolas"),local("DejaVu Sans Mono"); size-adjust:88%; ascent-override:96%; descent-override:24%; line-gap-override:0%; } :root{ /* ================================================================= 1. COLOUR — one high-chroma field, one dark stock, nothing else. ================================================================= */ /* THE FIELD. Prussian — iron-gall ink, banknote intaglio, blueprint. ~48% lightness, cool, and deliberately LOW chroma (0.097, half of Apple blue) so a full-viewport flood stays livable. It covers 100% of the viewport that is not an aperture. */ --sheet-true: #246290; /* the true sheet colour, held addressable so the app surface can remap --sheet to aperture stock while the seam and the withheld field keep real sheet. */ --sheet: #246290; /* the debossed (shadowed) edge of a cut, and the counterseal fold */ --sheet-deep: #003D6A; /* the lit edge of a cut */ --sheet-lift: #5088B7; /* INK ON INTAGLIO. Opacity is the emphasis mechanism; there is no second hue. 100% clause numbers, the display line, strong runs-in 5.81:1 86% body — the AA floor on this ground 4.77:1 60% LARGE TEXT AND DECORATION ONLY 3.18:1 Nothing essential and small is ever set at 60%. */ --ink: #ECF3F8; --ink-86: #ECF3F8DB; --ink-60: #ECF3F899; /* pre-composited flats, for borders and SVG where alpha is awkward */ --ink-86-flat:#D0DEEA; --ink-60-flat:#9CB9CF; /* THE APERTURE. A different stock entirely — near-black card seen through a cut in the sheet. Everything the product actually shows you sits on this. */ --aperture: #081018; --aperture-hi: #0F1820; /* hover / raised aperture, inputs */ --aperture-ink: #E4E8ED; /* 15.55:1 on --aperture */ --aperture-ink-2:#909498; /* 6.26:1 on --aperture — still AA */ --aperture-ink-86:#E4E8EDDB; /* 86% — app-surface body ink */ --aperture-ink-60:#E4E8ED99; /* 60% — app-surface decoration */ --aperture-rule: #E4E8ED1F;/* 12% hairline between rows — a DIVIDER, which 1.4.11 does not govern */ /* 40% form-control edge. Was 20% (#E4E8ED33), which measured 1.76:1 against --aperture-hi — an input whose own fill is 1.06:1 against the aperture behind it, so the field had no perceivable boundary at all. At 40% it measures 3.33:1 and clears 1.4.11 for a UI component edge. */ --aperture-edge: #E4E8ED66; /* SEMANTIC COLOUR — a prohibition, not a palette. These may only ever be set INSIDE an aperture, on --aperture. On sheet they are meaningless: a red ground destroys the meaning of red, and green-on-red is the one pairing this page must never make. They are used as a 1px EDGE or a rule, never as text colour, because at these values only --warn clears 4.5:1 on the aperture stock. */ --ok: #2F7D53; /* 3.81:1 on aperture — edge only */ --warn: #C08A1E; /* 6.28:1 on aperture — text-safe */ --danger: #B03A2A; /* 3.17:1 on aperture — edge only */ --info: #909498; /* informational uses the neutral, by design */ /* THE GRAIN. This is what makes the flood read as a material instead of a coloured div, and it is the single most load-bearing decoration in the direction. REVISED 2026-08-12, and be careful about WHY — the lab that proposed this change argued the old tile was aliased (lag-1 autocorrelation -0.077, i.e. a checkerboard). That claim came from rasterising the tile in a canvas and it does NOT reproduce on the rendered page: measured off real pixels, the old and new tiles both sit at r1 ~0.55 at 1x and ~0.79 at 2x. The old grain was fine as texture. Do not repeat the aliasing story. What was actually wrong was CONTRAST. The tile composited in linearRGB and was painted TWICE — once on body, once as a fixed overlay — which lightened the field enough to put body ink at 4.444:1 at 1x, under the 4.5 floor, on every flood page. One layer alone measured 4.504:1, i.e. scraping past. At 2x it passed, so it only bit non-retina displays. Now: baseFrequency 0.45, one octave, an explicit filter region, sRGB compositing, and a two-stop duotone tuned to Prussian (#184362 <-> #2F81BE) at constant 0.22 alpha — painted once. Measured on the page: cast +0.30 at 1x and 0.00 at 2x, body ink 4.692:1 at 1x and 4.771:1 at 2x. Re-derive it if the field changes: the two stops are baked from #246290. */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='0' y='0' width='180' height='180' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.2126 .7152 .0722 0 0 .2126 .7152 .0722 0 0 .2126 .7152 .0722 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0.0941 0.1843'/%3E%3CfeFuncG type='table' tableValues='0.2627 0.5059'/%3E%3CfeFuncB type='table' tableValues='0.3843 0.7451'/%3E%3CfeFuncA type='table' tableValues='0.22 0.22'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); /* ================================================================= 2. TYPE — two families, four sizes, and WIDTH as hierarchy. ================================================================= */ --font-display:"Archivo","Archivo Fallback","Helvetica Neue",Arial,sans-serif; --font-mono:"Departure Mono","Departure Fallback",ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* the entire scale. Four steps. There is no fifth. */ --t-13:13px; /* labels, margin notes, footer, mono detail */ --t-17:17px; /* clause numbers AND clause text — the page's voice */ --t-34:34px; /* the emphasised clause. Once, twice at most. */ --t-96:clamp(2.75rem, 2rem + 3.75vw, 6rem); /* 44→96px. The wordmark. Ratio 2.18 across the range, so 1.4.4 (200% text resize) holds without a scrollbar appearing. */ --lh-96:0.88; /* one word; the descender may sit into the rule below */ --lh-34:1.1; --lh-17:1.5; --lh-13:1.45; --ls-96:-0.04em; --ls-34:-0.02em; --ls-17:0; --ls-13:0.05em; --ls-mono:0; /* a pixel font must NEVER be tracked */ /* THE WIDTH AXIS. This is the hierarchy device — not size, not colour. Archivo is variable on wdth 62..125 and wght 100..900. ADDRESSED VIA font-stretch AND font-weight, NOT font-variation-settings. Revised 2026-08-12; the reason is not cosmetic and it is easy to undo by accident, so it is written down here: 1. FAILURE MODE. font-variation-settings does not set computed font-weight. Every emphasis site on this site computed 400 while asking for 800 through the axis. When Archivo does not load — blocked CDN, corporate proxy, privacy mode, offline, or China, where Google Fonts is blocked outright — the fallback has no axes at all, so the width was discarded AND no synthetic bold fired. Measured: the 96px wordmark rendered byte-identical to 17px body copy, 195.4px and 22.041% ink for both. With font-weight the same case computes 800 and synthesises bold at 26.278% ink, 1.19x. The width half is still lost — font-stretch does nothing on a static face — but the weight half survives. 2. THE REPLACE TRAP. font-variation-settings REPLACES rather than merges, so a rule setting only "wdth" silently reset an inherited "wght" to 400. Measured before the change: wght 800 followed by a wdth-only rule rendered at 400. font-stretch and font-weight inherit independently, so that class of bug cannot occur. 3. NO COST. With Archivo loaded the two spellings are identical to the pixel: font-stretch:112% measures 225.2px, exactly matching "wdth" 112; font-weight:800 measures 228.63px, exactly matching "wght" 800; both together 252.83px, exactly matching both axes. Keep the unitless --wdth-* values below in step with the --stretch-* percentages: they are the same numbers, and the lab pages still address the axis directly to demonstrate it. */ --wdth-narrow:62; /* stamp start frame only */ --wdth-text:100; /* clause text */ --wdth-wide:112; /* clause numbers, display, emphasis */ --stretch-narrow:62%; --stretch-text:100%; --stretch-wide:112%; --wght-text:400; --wght-med:500; /* the emphasised clause and strong runs-in */ --wght-heavy:800; /* clause numbers and the wordmark */ --measure:54ch; /* clause text. Hard rule: aim for ≤3 lines. */ /* ================================================================= 3. SPACE — the 96px clause pitch is the only rhythm on the page. ================================================================= */ --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px; --s-6:48px; --s-7:64px; --s-8:96px; --s-9:128px; --pitch:96px; /* min-height of one clause row */ --col-n:72px; /* the number column */ --col-n-sm:48px; /* …below 560px */ /* the sheet is deliberately UNEQUAL. The wide right margin is the room a sealed document leaves for a counterseal; the nav lives in it. */ --margin-l:clamp(24px, 6vw, 128px); --margin-r:clamp(24px, 12vw, 320px); --aperture-inset:96px; /* apertures sit further in from the right so they read as inside the sheet, not at its edge */ /* ================================================================= 4. BORDERS, RADII, ELEVATION A cut is a shadowed near lip on top/left and a LIT WALL on bottom/right. That is the entire depth model — no blur, no shadow, ever. REVISED 2026-08-12. The two lips used to be 1px each at -0.062 and +0.072 okL from the field, measuring 1.31:1 and 1.36:1 against it and only 1.78:1 against each other. Measured on the rendered page, the top edge ran field L* 39.8 -> deep 32.5 -> fill 4.4: monotonic, so a 7.3 darkening immediately before a 35.4 darkening integrated into one soft edge and read as the fill being 1px bigger. Only the bottom/right was a true local maximum. Now +/-0.13 okL — 1.72:1 and 1.72:1 against the field, 2.96:1 as a pair — and the far side is a 5px wall rather than a 1px line: a hole you can see the thickness of. The deltas derive per colourway, so this holds on all nine fields rather than only on Prussian. ================================================================= */ --edge:1px; /* legacy alias — still used by non-aperture rules */ --wall-near:1px; /* top/left: the shadowed lip */ --wall-far:5px; /* bottom/right: the lit wall, with real depth */ --edge-deep:var(--sheet-deep); --edge-lift:var(--sheet-lift); --r-0:0; /* everywhere */ --r-notch:8px; /* the ONE exception: the receipt tear-off */ --shadow:none; /* there are no shadows on this page */ /* ================================================================= 5. MOTION — mechanical, and it happens once. ================================================================= */ --stamp-dur:340ms; --stamp-ease:steps(6, end); /* pressed in six discrete increments */ --t-link:120ms; /* ink opacity 86 → 100 */ --t-disclose:180ms; --ease-disclose:cubic-bezier(0.2, 0, 0.38, 0.9); /* THE ONE LOOP. Everything above happens once; the landing's agent ticker (system.css §20) is the single deliberate exception, argued in that section's banner. Reading pace, pausable, and it wraps to a static row under prefers-reduced-motion. A second loop anywhere does not get to cite this token. */ --ticker-dur:44s; /* ================================================================= 6. Z-INDEX — three layers, because there are only three things: the sheet, the sticky rule, and the grain that sits over both. ================================================================= */ --z-base:0; --z-sticky:20; --z-grain:40; /* focus. Ink at 100% on the sheet is 5.81:1 — well past the 3:1 that a non-text indicator needs. Inside an aperture the ring flips stock. */ --focus-ring:2px solid var(--ink); --focus-offset:2px; color-scheme:dark; /* so scrollbars and form controls render dark against the flood. prefers-color-scheme: light changes nothing — see README §Dark mode. */ } /* One page. Light preference is acknowledged and deliberately ignored. */ @media (prefers-color-scheme: light){ :root{ color-scheme:dark; } } /* ===================================================================== SEALED — DIRECTION 5: "INTAGLIO" system.css — every component, built only on tokens.css. READING ORDER 0 reset + the sheet 5 rows, receipt, chips, tables 1 the wordmark + margin 6 buttons, links, forms 2 the clause list 7 states, notes, compare 3 apertures (the cuts) 8 diagram 4 sticky rule + counterseal 9 responsive + reduced motion ===================================================================== */ /* ── 0. RESET AND THE SHEET ───────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} /* NO `overflow-x:hidden` here. Setting it on html/body computes overflow-y to `auto`, which turns BOTH into scroll containers and silently kills `position:sticky` on every descendant — including .stickyrule, the one sticky object the direction has. Nothing on this page overflows at 375px (measured), so the hack bought nothing and cost the sticky rule. */ html,body{max-width:100%} html{scroll-behavior:smooth} body{ /* THE FLOOD. 100% of the viewport that is not an aperture is sheet. */ background-color:var(--sheet); background-image:var(--grain); background-attachment:fixed; color:var(--ink-86); font-family:var(--font-display); font-size:var(--t-17); line-height:var(--lh-17); font-stretch:var(--stretch-text);font-weight:var(--wght-text); -webkit-font-smoothing:antialiased; overflow-wrap:break-word; min-height:100%; } /* REMOVED 2026-08-12 — a fixed full-viewport grain overlay used to sit here at opacity .5, on top of the grain body already paints. Two layers of the same tile is twice the texture and a repaint on every scroll. Its stated job was to carry grain over the sticky rule and the counterseal so the sheet reads as one piece of material. It was not doing that job: both .stickyrule and .counterseal set background-image:var(--grain) themselves, so the effect survives its removal. What it also did, and should not have, was lay sheet texture over the aperture stock — the one surface in this direction that is explicitly a DIFFERENT material. */ a{color:inherit;text-decoration:none} /* headings carry no size of their own. In this direction hierarchy is carried by the width axis, so an h2 must not arrive pre-sized. */ h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;line-height:inherit} img,video,svg{max-width:100%} .scroll-x{overflow-x:auto} /* THERE IS NO CONTAINER. No max-width, nothing centred. Content is positioned by unequal margins measured from the viewport edges. */ .sheet{padding-inline:var(--margin-l) var(--margin-r);position:relative} .skip{position:absolute;left:-9999px;top:0;background:var(--aperture); color:var(--aperture-ink);font-family:var(--font-mono);font-size:var(--t-13); padding:12px 16px;z-index:100} .skip:focus{left:0} :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:var(--focus-ring);outline-offset:var(--focus-offset); } .aperture :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--aperture-ink); } /* .skip paints ITSELF on aperture stock but lives outside .aperture, so the rule above never reached it and it took the sheet ring — var(--ink). On the two LIGHT colourways (manila, kraft) --ink is dark, which put a dark ring on a near-black chip: the first keyboard stop on every page had no visible focus indicator at all. It flips stock like anything else on that stock, and the ring is inset so it stays on the chip rather than landing on the sheet behind it — where a light ring would fail on a light field instead. */ .skip:focus-visible{outline:2px solid var(--aperture-ink);outline-offset:-2px} /* ── 1. THE WORDMARK IS THE NAVIGATION ──────────────────────────────── There is no nav bar. The word `sealed` at 96px in the top-left is simultaneously the wordmark and the only navigation; the four links sit stacked and right-aligned OUT IN THE MARGIN, the way a margin note sits beside a clause. Every other direction has a nav; this one has a margin. ------------------------------------------------------------ */ .masthead{ display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:start;column-gap:var(--s-5); padding-block:var(--s-6) var(--s-5); } .wordmark{ display:block; font-size:var(--t-96);line-height:var(--lh-96);letter-spacing:var(--ls-96); color:var(--ink); font-stretch:var(--stretch-wide);font-weight:var(--wght-heavy); animation:sheet-stamp var(--stamp-dur) var(--stamp-ease) 1 both; } .wordmark .tld{color:var(--ink-60)} /* the stamp: pressed in six discrete increments, once, on load, never again */ @keyframes sheet-stamp{ from{font-stretch:var(--stretch-narrow);font-weight:var(--wght-heavy)} to {font-stretch:var(--stretch-wide);font-weight:var(--wght-heavy)} } /* the margin: nav links + the one all-caps label the page allows itself */ .margin{ display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-2); text-align:right; /* pull out of the content column, into the counterseal margin */ margin-right:calc(-1 * clamp(0px, 8vw, 200px)); padding-top:var(--s-2); } .mlink{ font-size:var(--t-13);line-height:var(--lh-13);letter-spacing:var(--ls-13); text-transform:none;color:var(--ink-86); transition:color var(--t-link) linear; min-height:24px;display:inline-flex;align-items:center; } .mlink:hover,.mlink[aria-current="page"]{color:var(--ink)} .margin-label{ font-size:var(--t-13);letter-spacing:var(--ls-13);text-transform:uppercase; color:var(--ink-86);margin-top:var(--s-3);max-width:22ch;line-height:var(--lh-13); } /* ── 2. THE CLAUSE LIST IS THE PAGE ────────────────────────────────── Thirteen-plus rows. Two columns: a 72px number, then the clause. No rules between them — the 96px pitch and the number column do all the separating. There are no section heads anywhere, by design: the clause numbers are the only structural typography on the page. ------------- */ .clauses{padding-bottom:var(--s-7)} .clause{ position:relative; display:grid;grid-template-columns:var(--col-n) minmax(0,1fr); align-items:start;min-height:var(--pitch);padding-block:var(--s-3) var(--s-4); } /* THE MARGINAL LABEL. The site's copy carries section labels ("The problem", "Listing", "Questions"). This direction has no section heads, so the label does not go above the clause — it goes OUT INTO THE COUNTERSEAL MARGIN beside it, like an annotation on a legal document. Same move as the hero eyebrow: the eyebrow leaves the column. */ .clause__margin{ position:absolute;top:22px;right:calc(-1 * clamp(8px, 7vw, 180px)); width:15ch;text-align:right; font-size:var(--t-13);line-height:var(--lh-13);letter-spacing:var(--ls-13); text-transform:uppercase;color:var(--ink-86); } .clause__n{ font-size:var(--t-17);line-height:var(--lh-17);color:var(--ink); font-stretch:var(--stretch-wide);font-weight:var(--wght-heavy); font-variant-numeric:tabular-nums; } .clause__t{ font-size:var(--t-17);line-height:var(--lh-17);letter-spacing:var(--ls-17); max-width:var(--measure);color:var(--ink-86); } .clause__t p+p{margin-top:var(--s-3)} /* strong run-in: emphasis by WIDTH + WEIGHT + OPACITY. Never by colour. */ .clause__t b,.clause__t strong{ color:var(--ink);font-weight:400; font-stretch:var(--stretch-wide);font-weight:var(--wght-med); } /* the callout mechanism, in full: one clause is set at 34px and spans both columns. There is no boxed variant, and there never will be. */ .clause--loud{grid-template-columns:1fr;row-gap:var(--s-2)} .clause--loud .clause__n{display:block} /* the number keeps its place in the sequence even when the clause spans both columns — the count must never appear to skip, or the manifesto stops being a manifesto */ .clause--loud .clause__t{ font-size:var(--t-34);line-height:var(--lh-34);letter-spacing:var(--ls-34); color:var(--ink);max-width:22ch; font-stretch:var(--stretch-text);font-weight:var(--wght-med); } /* …and when the frozen copy is too long for 34px, the emphasis is carried by the width axis alone. Same mechanism, quieter setting. */ .clause--wide .clause__t{ max-width:64ch;color:var(--ink); font-stretch:var(--stretch-text);font-weight:var(--wght-med); } /* A clause may FOLD. This is the direction's answer to the FAQ: there is no FAQ, there are objections, and an objection is a clause that opens. */ .clause details{max-width:64ch} .clause summary{ list-style:none;cursor:pointer;position:relative;padding-right:var(--s-5); color:var(--ink); font-stretch:var(--stretch-wide);font-weight:var(--wght-med); } .clause summary::-webkit-details-marker{display:none} .clause summary::marker{content:""} .clause summary::after{ content:"+";position:absolute;right:0;top:0; font-family:var(--font-mono);font-size:var(--t-17);color:var(--ink-86); } .clause details[open] summary::after{content:"–"} .clause details[open] summary{margin-bottom:var(--s-2)} .clause details .a{color:var(--ink-86);max-width:60ch} .clause details .a+.a{margin-top:var(--s-3)} .clause details>*:not(summary){animation:disclose var(--t-disclose) var(--ease-disclose) both} @keyframes disclose{from{opacity:0}to{opacity:1}} /* ── 3. APERTURES — THE ONLY BOXED OBJECTS ON THE PAGE ──────────────── Not cards placed on the material: CUTS through it. 1px --sheet-deep on the top and left, 1px --sheet-lift on the bottom and right, which reads as debossed rather than raised. Radii 0. No shadow, ever. ----------- */ /* THE WALL, revised 2026-08-12. A cut through a sheet has thickness, and the two lips are not symmetric: the near one is a shadowed 1px lip, the far one is a lit wall you can see down. Measured on the page before this change, the top edge ran field L* 39.8 -> deep 32.5 -> fill 4.4 — monotonic, so a 7.3 darkening immediately before a 35.4 darkening integrated into a single soft edge and read as the fill being 1px bigger. Only the bottom/right was a true local maximum, which is why a cut only looked like a cut along one pair of sides. Widening the deltas alone did not fix that; giving the far side real depth did. */ .aperture{ background:var(--aperture);color:var(--aperture-ink); border-top:var(--wall-near) solid var(--edge-deep); border-left:var(--wall-near) solid var(--edge-deep); border-bottom:var(--wall-far) solid var(--edge-lift); border-right:var(--wall-far) solid var(--edge-lift); border-radius:var(--r-0); padding:var(--s-4); margin-right:var(--aperture-inset); margin-block:var(--s-3) var(--s-6); font-family:var(--font-mono);font-size:var(--t-13);line-height:1.6; letter-spacing:var(--ls-mono); } .aperture__label{ display:block;font-family:var(--font-mono);font-size:var(--t-13); letter-spacing:var(--ls-13);text-transform:uppercase; color:var(--aperture-ink-2);margin-bottom:var(--s-3); } .aperture p{font-family:var(--font-display);font-size:15px;line-height:1.55; color:var(--aperture-ink);max-width:62ch} .aperture p+p{margin-top:var(--s-3)} .aperture .a-link{color:var(--aperture-ink);border-bottom:1px solid var(--aperture-ink-2)} .aperture .a-link:hover{border-bottom-color:var(--aperture-ink)} /* the receipt: the page's ONE radius exception — two 8px half-circle notches punched into the left and right edges. It is a tear-off stub. */ .aperture--receipt{ -webkit-mask-image: radial-gradient(circle var(--r-notch) at 0 50%, transparent var(--r-notch), #000 calc(var(--r-notch) + 0.5px)), radial-gradient(circle var(--r-notch) at 100% 50%, transparent var(--r-notch), #000 calc(var(--r-notch) + 0.5px)); mask-image: radial-gradient(circle var(--r-notch) at 0 50%, transparent var(--r-notch), #000 calc(var(--r-notch) + 0.5px)), radial-gradient(circle var(--r-notch) at 100% 50%, transparent var(--r-notch), #000 calc(var(--r-notch) + 0.5px)); -webkit-mask-composite:source-in;mask-composite:intersect; } .aperture .receipt__fig{ font-family:var(--font-display);font-size:var(--t-34);line-height:var(--lh-34); letter-spacing:var(--ls-34);color:var(--aperture-ink); font-stretch:var(--stretch-text);font-weight:var(--wght-med); font-variant-numeric:tabular-nums;max-width:24ch; } .receipt__rule{border:0;border-top:1px dashed var(--aperture-rule);margin:var(--s-4) 0} .receipt__line{display:flex;justify-content:space-between;gap:var(--s-3); font-family:var(--font-mono);font-size:var(--t-13);color:var(--aperture-ink-2); font-variant-numeric:tabular-nums;padding-block:4px} .receipt__line b{color:var(--aperture-ink);font-weight:400} .aperture .receipt__stub{font-family:var(--font-mono);font-size:var(--t-13); line-height:1.7;color:var(--aperture-ink-2);margin-top:var(--s-4);max-width:none} /* the CTA is an aperture: a 64px-tall cut with the label in mono. There is exactly one on a page and it is never above the fold. */ /* The CTA cut carries an ink hairline instead of the sheet deboss. A cut in the sheet is decoration and 1.4.11 does not govern it; a cut that is the page's ONE ACTION is a UI component and does. --aperture against --sheet measures 2.94:1, so the debossed edge (1.3:1) could not rescue it. Ink at 60% is 3.18:1 against the sheet and 6.26:1 against the aperture fill, so the boundary is legible from both sides — and it reads as the scored line of a cut about to be pressed out, which is the metaphor, not a betrayal of it. --aperture itself is untouched, so every other cut keeps reading as stock seen through the sheet. */ .aperture--cta{ padding:0;margin-bottom:var(--s-6); border:var(--edge) solid var(--ink-60); /* background-clip defaults to border-box, which paints the opaque fill UNDER the border — so this 60%-alpha edge was compositing over the fill (#91989E, 2.23:1 against the field) rather than over the sheet. The comment that used to sit here claimed 3.05:1, which was the figure for compositing over the sheet. Clipping to padding-box makes the claim true: #9CB9CE, 3.18:1. This is the page's one action, so 1.4.11 applies to it — unlike a plain .aperture, which is a decorative container and exempt. */ background-clip:padding-box; } .btn{ display:flex;align-items:center;gap:var(--s-3); min-height:64px;padding-inline:var(--s-4); background:var(--aperture);color:var(--aperture-ink); font-family:var(--font-mono);font-size:var(--t-17);letter-spacing:var(--ls-mono); border:0;border-radius:var(--r-0);cursor:pointer;width:100%; transition:background var(--t-link) linear; } .btn:hover{background:var(--aperture-hi)} .btn:active{background:#0C0A09} .btn:disabled,.btn[aria-disabled="true"]{background:var(--aperture-hi);color:var(--aperture-ink-2);cursor:not-allowed} /* A primary button INSIDE an aperture (a receipt's action, a form's submit) would otherwise be --aperture on --aperture: 1.00:1, a control with no boundary whatsoever. So it inverts — ink fill, aperture-coloured label. That is the stamp pressed INTO the card rather than another hole in it, it measures 15.55:1, and it keeps primary visibly distinct from the .btn--cut beside it. `.aperture--cta` is excluded: there the cut IS the button, and the fill is supposed to be the aperture stock. */ .aperture:not(.aperture--cta) .btn:not(.btn--cut):not(.btn--text){ background:var(--aperture-ink);color:var(--aperture); } .aperture:not(.aperture--cta) .btn:not(.btn--cut):not(.btn--text):hover{background:#FFFFFF} .aperture:not(.aperture--cta) .btn:not(.btn--cut):not(.btn--text):active{background:var(--aperture-ink-2)} .aperture:not(.aperture--cta) .btn:not(.btn--cut):not(.btn--text):disabled, .aperture:not(.aperture--cta) .btn:not(.btn--cut):not(.btn--text)[aria-disabled="true"]{ background:var(--aperture-ink-2);color:var(--aperture)} /* secondary: the same cut, UNFILLED — the sheet shows through. Its edge is ink at 60% (3.18:1 on the sheet), not the sheet deboss: an unfilled control IS its outline, and the deboss pair measures 1.3:1, which would have left the secondary button with no visible boundary whatsoever. */ .btn--cut{ background:transparent;color:var(--ink); border:var(--edge) solid var(--ink-60); min-height:48px;width:auto; transition:border-color var(--t-link) linear; } .btn--cut:hover{background:transparent;color:var(--ink);border-color:var(--ink)} .btn--cut:active{border-color:var(--ink)} .btn--cut:disabled,.btn--cut[aria-disabled="true"]{color:var(--ink-60);border-color:var(--sheet-deep);cursor:not-allowed} /* tertiary: text only, 1px underline, no box at all */ .btn--text{ background:transparent;border:0;color:var(--ink);min-height:44px;width:auto; padding-inline:0;border-bottom:1px solid var(--ink-60); transition:border-color var(--t-link) linear; } .btn--text:hover{background:transparent;border-bottom-color:var(--ink)} .btn--text:disabled,.btn--text[aria-disabled="true"]{color:var(--ink-60);border-bottom-color:var(--sheet-deep);cursor:not-allowed} /* ── 4. THE STICKY RULE AND THE COUNTERSEAL ────────────────────────── A single 44px bar with ONE link, and it exists only after clause 06 — it is placed in the flow there, so a reader at the top never sees it. No JavaScript: `position:sticky` on an in-flow element does this. ---- */ .stickyrule{ position:sticky;top:0;z-index:var(--z-sticky); display:flex;align-items:center;justify-content:space-between;gap:var(--s-3); height:44px;margin-block:var(--s-4); background-color:var(--sheet);background-image:var(--grain); border-bottom:1px solid var(--sheet-deep); } .stickyrule span{font-family:var(--font-mono);font-size:var(--t-13); letter-spacing:var(--ls-mono);color:var(--ink-86)} .stickyrule a{font-size:var(--t-13);letter-spacing:var(--ls-13);color:var(--ink-86); border-bottom:1px solid var(--ink-60);transition:color var(--t-link) linear} .stickyrule a:hover{color:var(--ink)} /* the counterseal: a 96px block flush to the bottom-left on --sheet-deep rather than --sheet. It is the page's only tonal change, so the sheet reads as FOLDED rather than as having a footer. */ .counterseal{ background:var(--sheet-deep); border-top:1px solid var(--sheet-deep); padding-block:var(--s-6); margin-top:var(--s-7); } .counterseal__grid{ display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,1fr); gap:var(--s-5);align-items:start; } .counterseal .cs-brand{ font-size:var(--t-17);color:var(--ink);letter-spacing:var(--ls-17); font-stretch:var(--stretch-wide);font-weight:var(--wght-heavy); margin-bottom:var(--s-2);display:flex;align-items:center; } /* no flex `gap` here: the wordmark is a bare text node plus a .tld span, so the span is its own flex item and a gap would open between "sealed" and ".run" as well as after the icon. The spacing belongs to the icon only. */ .counterseal .cs-brand img{ width:20px;height:20px;display:block;margin-inline-end:var(--s-2); } .counterseal p,.counterseal li,.counterseal div{font-size:var(--t-13);line-height:1.7;color:var(--ink-86)} .counterseal .cs-head{font-family:var(--font-mono);font-size:var(--t-13); letter-spacing:var(--ls-13);text-transform:uppercase;color:var(--ink-86);margin-bottom:var(--s-2)} /* the counterseal underline is ink at 60% (4.62:1 on --sheet-deep), not --sheet-lift (1.73:1). Footer link text is the same --ink-86 as the footer prose around it, so the underline is the ONLY thing marking a link — at 1.73:1 it was invisible and the footer failed 1.4.1 outright. */ .flink{color:var(--ink-86);border-bottom:1px solid var(--ink-60); transition:color var(--t-link) linear} .flink:hover{color:var(--ink);border-bottom-color:var(--ink)} .counterseal .cs-edition{font-family:var(--font-mono);font-size:var(--t-13); color:var(--ink-86);font-variant-numeric:tabular-nums;margin-top:var(--s-3)} /* ── 5. ROWS, CHIPS, TABLES — everything that looks like software ───── and all of it lives inside an aperture. The surrounding sheet is what makes a row read as HELD INSIDE rather than merely listed. ---------- */ .rows{display:block;margin-top:var(--s-2)} .row{ display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:baseline;gap:var(--s-3); min-height:36px;padding-block:var(--s-2); border-bottom:1px solid var(--aperture-rule); } .row:last-child{border-bottom:0} .row__name{font-family:var(--font-display);font-size:15px;color:var(--aperture-ink); font-stretch:var(--stretch-text);font-weight:var(--wght-med)} .row__by{display:block;font-family:var(--font-display);font-size:var(--t-13); color:var(--aperture-ink-2);margin-top:2px} .row__num{font-family:var(--font-mono);font-size:var(--t-13);color:var(--aperture-ink); font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .row__go{font-family:var(--font-mono);font-size:var(--t-13);color:var(--aperture-ink); border-bottom:1px solid var(--aperture-ink-2);white-space:nowrap} .row__go:hover{border-bottom-color:var(--aperture-ink)} /* the search field + tabs that sit above a row list */ .rowbar{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center; margin-bottom:var(--s-3)} .tabs{display:flex;gap:0} .tab{font-family:var(--font-mono);font-size:var(--t-13);letter-spacing:var(--ls-mono); color:var(--aperture-ink-2);background:transparent;border:0; border-bottom:1px solid transparent;padding:6px 12px;cursor:pointer;min-height:32px} .tab[aria-selected="true"]{color:var(--aperture-ink);border-bottom-color:var(--aperture-ink)} .tab:hover{color:var(--aperture-ink)} /* input chips — only inside an aperture, mono 13px, 1px underline. */ .chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s-4); margin-top:var(--s-2)} .chip__t{display:block;font-family:var(--font-mono);font-size:var(--t-13); letter-spacing:var(--ls-mono);color:var(--aperture-ink); border-bottom:1px solid var(--aperture-ink-2);padding-bottom:4px;margin-bottom:var(--s-2)} .chip__b{font-family:var(--font-mono);font-size:var(--t-13);line-height:1.7; color:var(--aperture-ink-2);display:block} /* THE WITHHELD FIELD. A solid rectangle of --sheet inside the aperture, so the material of the sheet is literally what "you cannot see this" looks like. It carries no label because it does not need one — that is the whole product in one object. */ .withheld{ display:block;min-height:72px;margin-top:var(--s-3); background-color:var(--sheet);background-image:var(--grain); border:0;border-radius:var(--r-0); } .withheld--thin{min-height:20px} /* table — figures are tabular everywhere they appear */ .tbl{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:var(--t-13)} .tbl caption{text-align:left;color:var(--aperture-ink-2);padding-bottom:var(--s-2); letter-spacing:var(--ls-mono)} .tbl th{text-align:left;color:var(--aperture-ink-2);font-weight:400; padding:6px 12px 6px 0;border-bottom:1px solid var(--aperture-rule)} .tbl td{color:var(--aperture-ink);padding:8px 12px 8px 0; border-bottom:1px solid var(--aperture-rule);font-variant-numeric:tabular-nums} .tbl .num{text-align:right;padding-right:0} /* code, inline code, keys, stamps */ .code{display:block;white-space:pre;overflow-x:auto;background:var(--aperture-hi); color:var(--aperture-ink);font-family:var(--font-mono);font-size:var(--t-13); line-height:1.7;padding:var(--s-3);border-radius:var(--r-0)} code{font-family:var(--font-mono);font-size:var(--t-13);color:var(--ink); border-bottom:1px solid var(--ink-60)} .aperture code{color:var(--aperture-ink);border-bottom-color:var(--aperture-ink-2)} .kbd{font-family:var(--font-mono);font-size:var(--t-13);color:var(--aperture-ink); border:1px solid var(--aperture-ink-2);padding:1px 6px;border-radius:var(--r-0)} /* not a pill — a STAMP. Radius 0, mono, 1px edge. */ .stamp{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono); font-size:var(--t-13);letter-spacing:var(--ls-13);text-transform:uppercase; color:var(--aperture-ink);border:1px solid var(--aperture-ink-2); padding:2px 8px;border-radius:var(--r-0)} .stamp--sheet{color:var(--ink);border-color:var(--ink-60)} /* ── 6. LINKS AND FORMS ────────────────────────────────────────────── An inline link is ink at 100% with a 1px underline. There is no link colour, because there is no accent. ------------------------------- */ .link{color:var(--ink);border-bottom:1px solid var(--ink-60); transition:border-color var(--t-link) linear} .link:hover{border-bottom-color:var(--ink)} .muted{color:var(--ink-86)} .muted .link{color:var(--ink)} /* Forms exist ONLY inside apertures — a form is a place where something is shown or taken, and on this page that is what an aperture is for. */ .field{display:block;margin-bottom:var(--s-4);max-width:44ch} .field__label{display:block;font-family:var(--font-mono);font-size:var(--t-13); letter-spacing:var(--ls-13);text-transform:uppercase;color:var(--aperture-ink-2); margin-bottom:var(--s-2)} .input,.textarea,.select{ width:100%;min-height:44px;background:var(--aperture-hi);color:var(--aperture-ink); border:1px solid var(--aperture-edge);border-radius:var(--r-0); font-family:var(--font-mono);font-size:var(--t-13);letter-spacing:var(--ls-mono); padding:10px 12px; } .textarea{min-height:96px;line-height:1.6;resize:vertical} .select{appearance:none;background-image:none;padding-right:32px} .input::placeholder,.textarea::placeholder{color:var(--aperture-ink-2)} .input:hover,.textarea:hover,.select:hover{border-color:var(--aperture-ink-2)} .field__help{display:block;font-family:var(--font-mono);font-size:var(--t-13); color:var(--aperture-ink-2);margin-top:var(--s-2)} /* error is never carried by hue alone: a 1px danger edge PLUS a mono ERROR label, with the message itself in full-strength ink. */ /* --danger measures 2.96:1 against --aperture-hi, so it cannot be the field's whole boundary. It stays as the 2px left accent — the mark that says WHICH field — while the other three sides keep the compliant --aperture-edge. Hue is supplementary here, exactly as intended. */ .field--error .input,.field--error .textarea,.field--error .select{ border-color:var(--aperture-edge); border-left:2px solid var(--danger)} .field__err{display:flex;gap:8px;align-items:baseline;margin-top:var(--s-2); font-family:var(--font-mono);font-size:var(--t-13);color:var(--aperture-ink)} .field__err::before{content:"ERROR";color:var(--warn);letter-spacing:var(--ls-13)} /* radius 0 holds here too: a checkbox is a square that fills; a radio is a square with an inset block. They are told apart by their MARK, not by their outline — see README §Components. */ .check,.radio{ appearance:none;width:16px;height:16px;flex:0 0 16px;border-radius:var(--r-0); border:1px solid var(--aperture-ink-2);background:var(--aperture-hi); display:inline-grid;place-content:center;cursor:pointer;margin-top:2px; } .check:checked{background:var(--aperture-ink);border-color:var(--aperture-ink)} .check:checked::after{content:"✓";font-family:var(--font-mono);font-size:11px; color:var(--aperture);line-height:1} .radio:checked::after{content:"";width:6px;height:6px;background:var(--aperture-ink)} .choice{display:flex;gap:var(--s-2);align-items:flex-start;margin-bottom:var(--s-2); font-family:var(--font-mono);font-size:var(--t-13);color:var(--aperture-ink);cursor:pointer} /* ── 7. STATES, NOTES, COMPARE ─────────────────────────────────────── Semantic hue may only appear inside an aperture, and only as an edge. The text always stays in --aperture-ink so the pairing clears AA. --- */ .note{border-left:2px solid var(--aperture-ink-2);padding-left:var(--s-3);margin-top:var(--s-3)} .note--info{border-left-color:var(--info)} .note--ok{border-left-color:var(--ok)} .note--warn{border-left-color:var(--warn)} .note--danger{border-left-color:var(--danger)} .note__tag{display:block;font-family:var(--font-mono);font-size:var(--t-13); letter-spacing:var(--ls-13);text-transform:uppercase;color:var(--aperture-ink-2);margin-bottom:4px} .note--warn .note__tag{color:var(--warn)} /* feedback states — deliberately unanimated. The loading state REPORTS, it does not spin: nothing on this page loops. */ .state{font-family:var(--font-mono);font-size:var(--t-13);color:var(--aperture-ink-2); padding:var(--s-4) 0;text-align:left} .state b{display:block;color:var(--aperture-ink);font-weight:400;margin-bottom:4px} .state__meter{color:var(--aperture-ink);letter-spacing:2px} /* two-column compare: affirmative and negative, told apart by the edge they carry and by the direction of their mark, not by two hues. */ .compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)} .compare__col{padding-top:var(--s-3);border-top:2px solid var(--ink-60)} .compare__col--yes{border-top-color:var(--ink)} .compare__col h4{font-size:var(--t-17);color:var(--ink);margin:var(--s-2) 0; font-stretch:var(--stretch-wide);font-weight:var(--wght-med)} .compare__col p{font-size:var(--t-17);color:var(--ink-86);max-width:40ch} .compare__tag{font-family:var(--font-mono);font-size:var(--t-13); letter-spacing:var(--ls-13);text-transform:uppercase;color:var(--ink-86)} /* numbered / ruled list — the "why it leaks" bullets. Numbers are in the number column, so the list is just a short clause list. */ .ruled{list-style:none} .ruled li{display:grid;grid-template-columns:var(--col-n) minmax(0,1fr); align-items:start;padding-block:var(--s-3);border-top:1px solid var(--sheet-deep)} .ruled li:last-child{border-bottom:1px solid var(--sheet-deep)} .ruled .n{font-family:var(--font-mono);font-size:var(--t-13);color:var(--ink-86); font-variant-numeric:tabular-nums;letter-spacing:var(--ls-mono)} .ruled .t{font-size:var(--t-17);color:var(--ink-86);max-width:var(--measure)} /* ── 8. DIAGRAM ────────────────────────────────────────────────────── Every diagram in this direction obeys one rule: it is drawn INSIDE an aperture, in 1px strokes, with ink at three opacities and no gradient, no filter, no radius — and the only sheet-coloured shape in it is the thing being withheld. See README §Diagram rule. --------------------- */ .diagram{display:block;width:100%;height:auto} .diagram text{font-family:var(--font-mono);font-size:11px;letter-spacing:0} /* A DENSE diagram wrapped in §1's .scroll-x keeps its drawn width instead of scaling down with the cut. width:100% is right for a wide, sparsely labelled drawing — the one on /how-it-works has six labels and survives any width — but it is wrong for a dense one: .diagram text is a fixed 11px in the viewBox's own units, so a 640-unit drawing inside a 340px cut renders its labels at about 6px, which is a drawing nobody can read. Below the fold-point such a diagram holds its width and the cut scrolls, which is exactly what a .tbl already does. Opt-in: an unwrapped .diagram is untouched, so this cannot change a drawing that was fine. */ @media (max-width:640px){ .scroll-x .diagram{min-width:560px} } /* ── 9. RESPONSIVE ─────────────────────────────────────────────────── 560 number column 48px, right margin 24px, apertures full width 900 counterseal and compare stack 1440 right margin caps at 320px (handled by the clamp) ------------------------------------------------------------------- */ @media (max-width:900px){ .counterseal__grid{grid-template-columns:1fr 1fr} .compare{grid-template-columns:1fr} /* below 900 the counterseal margin is too narrow to hold an annotation without crowding the measure, so the label folds above the clause */ .clause__margin{position:static;width:auto;text-align:left; grid-column:2;margin-bottom:var(--s-2)} } @media (max-width:560px){ :root{--col-n:var(--col-n-sm);--margin-r:24px;--aperture-inset:0px;--pitch:auto} .masthead{grid-template-columns:1fr;row-gap:var(--s-4);padding-block:var(--s-5) var(--s-4)} .margin{align-items:flex-start;text-align:left;margin-right:0; flex-direction:row;flex-wrap:wrap;gap:var(--s-3)} .margin-label{width:100%;margin-top:0} .clause{min-height:0;padding-block:var(--s-3) var(--s-4)} .counterseal__grid{grid-template-columns:1fr;gap:var(--s-4)} .chips{grid-template-columns:1fr} .aperture{margin-right:0} .row{grid-template-columns:1fr;gap:var(--s-2)} .row__num{text-align:left} .spec{grid-template-columns:1fr;gap:var(--s-3)} .sg-set{gap:var(--s-3)} } /* ── 10. STYLEGUIDE INSTRUMENTS ────────────────────────────────────── Used only by styleguide.html. `.is-*` are state PROXIES: they paint the hover/active/focus appearance on a static element so every state can be seen at once. Never ship them on a product page. ------------------- */ .is-hover.btn{background:var(--aperture-hi)} .is-active.btn{background:#0C0A09} .is-hover.btn--cut,.is-hover.btn--text{background:transparent} .is-hover.btn--cut{border-color:var(--ink)} .is-active.btn--cut{border-color:var(--ink)} .is-hover.btn--text{border-bottom-color:var(--ink)} .is-hover.link,.is-hover.flink{border-bottom-color:var(--ink)} .is-hover.mlink{color:var(--ink)} .is-focus{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .aperture .is-focus{outline:2px solid var(--aperture-ink)} /* annotation prose stays in Archivo: Departure Mono is confined to apertures (plus the two numeric exceptions the direction grants — the sticky counter and the counterseal edition line). */ .sg-note{font-family:var(--font-display);font-size:var(--t-13);color:var(--ink-86); letter-spacing:0;margin-bottom:var(--s-3);max-width:70ch;line-height:1.7} .sg-set{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:flex-start;margin-bottom:var(--s-4)} .sg-cap{display:block;font-family:var(--font-display);font-size:var(--t-13); letter-spacing:var(--ls-13);text-transform:uppercase;color:var(--ink-86);margin-bottom:var(--s-2)} .aperture .sg-cap{font-family:var(--font-mono);letter-spacing:var(--ls-13);color:var(--aperture-ink-2)} .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s-3)} .swatch{border-top:1px solid var(--ink-60);padding-top:var(--s-2)} .swatch__chip{display:block;height:56px;border:1px solid var(--sheet-deep)} .swatch__meta{font-family:var(--font-mono);font-size:var(--t-13);line-height:1.7; color:var(--ink-86);margin-top:var(--s-2);font-variant-numeric:tabular-nums} .swatch__meta b{display:block;color:var(--ink);font-weight:400} .spec{display:grid;grid-template-columns:minmax(0,1fr) 22ch;gap:var(--s-4); align-items:baseline;border-top:1px solid var(--sheet-deep);padding-block:var(--s-4)} .spec__meta{font-family:var(--font-mono);font-size:var(--t-13);color:var(--ink-86); letter-spacing:var(--ls-mono);font-variant-numeric:tabular-nums} .scale{display:grid;gap:var(--s-2)} .scale__row{display:grid;grid-template-columns:10ch 1fr;gap:var(--s-3);align-items:center; font-family:var(--font-mono);font-size:var(--t-13);color:var(--ink-86); font-variant-numeric:tabular-nums} .scale__bar{height:12px;background:var(--sheet-deep);border-right:1px solid var(--sheet-lift)} /* prefers-reduced-motion: the wordmark renders at its final width immediately with no stamp. The 120ms link opacity SURVIVES, because a colour change carries no vestibular risk. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .wordmark{animation:none;font-stretch:var(--stretch-wide);font-weight:var(--wght-heavy)} .clause details>*:not(summary){animation:none} } /* ═════════════════════════════════════════════════════════════════════ ── 11. THE CATALOGUE — THE MARKETPLACE BROWSE VIEW ────────────────── Used by marketplace.html. EXTENDS §5's .rows / .row; it does not replace them and it introduces no second row pattern. THE APERTURE DECISION, WRITTEN DOWN SO IT IS NOT RE-LITIGATED. The catalogue is ONE CUT, not fifteen. Fifteen cuts would be fifteen cards — the exact container this direction deleted — and fifteen debossed edges stacked at a 90px pitch turn the sheet into a grille, which is a texture, not a composition. An aperture is "the thing Sealed actually shows you", and here it is showing you ONE thing: the catalogue. So a single long window is cut through the sheet and the fifteen listings are RULED inside it on the §5 hairline, the way entries are ruled in a ledger. The sheet around the cut is what makes them read as HELD INSIDE rather than merely listed, and the ledger index in the left gutter is what makes fifteen of them read as a record rather than as a feed. Nothing in here may carry a hex value: the field colour is unsettled and two of the nine candidates are light with dark ink. Everything on the sheet goes through --ink/--ink-86/--ink-60, everything in the cut goes through --aperture-*. ═════════════════════════════════════════════════════════════════════ */ /* the search + tabs bar above the ledger. .rowbar is §5; these two only size its two children, because a .field defaults to a 44ch measure. */ .rowbar__search{flex:1 1 260px;margin:0;max-width:none} .rowbar__tabs{margin-left:auto} /* THE LEDGER. A .rows variant that opens a third column in front of the entry for the running index. 32px holds "01"–"15" in Departure Mono 13px with room to spare; below 560 it drops to 28px and the price falls under the entry rather than being squeezed against it. */ .rows--ledger{margin-top:var(--s-3)} .rows--ledger .row--entry{ grid-template-columns:var(--s-5) minmax(0,1fr) auto; column-gap:var(--s-3); align-items:baseline; padding-block:var(--s-3); /* the rules and the hover run 8px past the text on both sides, so a row reads as a full-width entry in the cut rather than as a paragraph that happens to have a line under it */ margin-inline:calc(-1 * var(--s-2)); padding-inline:var(--s-2); transition:background var(--t-link) linear; } .rows--ledger .row--entry:hover{background:var(--aperture-hi)} /* [hidden] must beat `display:grid`, or a filtered-out row stays visible */ .row[hidden]{display:none} .row__n{ grid-column:1;grid-row:1; font-family:var(--font-mono);font-size:var(--t-13);letter-spacing:var(--ls-mono); color:var(--aperture-ink-2);font-variant-numeric:tabular-nums; } .row__entry{grid-column:2;grid-row:1;display:block;min-width:0} .rows--ledger .row__num{grid-column:3;grid-row:1} /* the unit is secondary so the FIGURE is what the eye lands on */ .row__unit{color:var(--aperture-ink-2)} /* the official mark. Same line as the name, but mono against Archivo, 13px against 15px, and --aperture-ink-2 against --aperture-ink: three separate signals that it is a registry mark and not part of the name, so it never has to shout. */ .row__seal{ font-family:var(--font-mono);font-size:var(--t-13);letter-spacing:var(--ls-mono); color:var(--aperture-ink-2);border-bottom:1px solid var(--aperture-ink-2); margin-left:var(--s-2);white-space:nowrap; } /* THE CLASSIFICATION LINE — execution mode, model tier, verification. Catalogue metadata only. Nothing here touches the skill body, and there is deliberately no "preview" or "see the prompt" affordance: a row shows you its label and its price, which is the whole argument. */ .row__meta{ display:flex;flex-wrap:wrap;column-gap:var(--s-3);row-gap:2px;margin-top:6px; font-family:var(--font-mono);font-size:var(--t-13);letter-spacing:var(--ls-mono); line-height:1.5; } /* a fact never breaks across lines. Left to wrap, the browser takes the hyphens in an ISO date as break opportunities and splits "2026-06-11" over two lines, which is why the date is its own fact rather than the tail of the verification one. */ .row__fact{color:var(--aperture-ink-2);white-space:nowrap} /* Mode B is the one listing that runs with local hands, so it is the one fact that gets a STAMP rather than a line of type — the §5 stamp, 1px edge, radius 0. It is told apart by having a border at all, never by a hue: semantic colour may not do this job even inside a cut, because Mode B is not a success, a warning or an error. */ .row__fact--stamp{ color:var(--aperture-ink);border:1px solid var(--aperture-ink-2); padding:0 6px;border-radius:var(--r-0); } /* A ROW THAT HAS NOT LOADED IS A ROW THAT IS STILL SEALED. The direction forbids a shimmer, a pulse or a spinner, so the skeleton does not animate: the fields are drawn as the sheet's own material showing through the cut — the §5 withheld field at row scale. It is the same object, and it means the same thing it always means. */ .withheld--bar{display:block;min-height:12px;margin-top:0} .row__entry .withheld--bar+.withheld--bar{margin-top:8px} /* a sealed row has no text baseline to align to, so its three columns are aligned to the top instead of the shared first baseline */ .rows--ledger .row--sealed{cursor:default;align-items:start} .rows--ledger .row--sealed:hover{background:transparent} @media (max-width:560px){ /* §9 collapses .row to a single column; the ledger keeps its index and drops the price onto its own line instead. */ .rows--ledger .row--entry{ grid-template-columns:28px minmax(0,1fr); row-gap:var(--s-2); } .rows--ledger .row__num{grid-column:2;grid-row:2;text-align:left} .rowbar__tabs{margin-left:0} .rowbar__tabs .tab{padding-inline:10px} } /* ═════════════════════════════════════════════════════════════════════ ── 12. THE LISTING — ONE SKILL, AND THE RUN ───────────────────────── Used by skill-detail.html. Continues §11: same ledger logic, same stamps, same withheld field. Nothing here is a new pattern for its own sake — every class below exists because the detail view shows something the catalogue does not. THE ONE COMPOSITIONAL DECISION, WRITTEN DOWN. A run reads down the page as three objects in a fixed order: the inputs form fields, on aperture stock — what you send the withheld a solid rectangle of the sheet's own material the output the ONLY 17px type inside any cut on the page The sheet rectangle sits between them in EVERY state — before the run, during it, and after the result arrives — and it never changes. That invariance is the argument: the inputs went in, the output came out, and the thing in the middle was never shown and never will be. It carries no caption, because §7's rule for .withheld is that it never carries one; the composition is the caption. The output is therefore the largest thing in any aperture on this page. Elsewhere a cut tops out at 15px (.aperture p, .row__name) with mono 13px around it, so setting the result at --t-17 makes it the single loudest object inside the sheet without introducing a fifth size, a second hue, or a box. It is what the buyer paid for, so it is what is lit. Colour discipline is §11's: everything on the sheet through --ink*, everything inside a cut through --aperture-*, no literal anywhere, semantic hue only inside a cut and only as an edge plus a word. ═════════════════════════════════════════════════════════════════════ */ /* ── 12.1 THE LISTING HEAD, ON THE INTAGLIO ─────────────────────────────── The skill's classification (mode, tier, category) is not a badge row: it is docket marginalia, so it goes out into the counterseal margin on §2's .clause__margin, beside the name it classifies. The two marks that are CLAIMS rather than classifications — Sealed-official, which links to the containment page, and the containment stamp — stay in the column as §5 stamps, because a claim has to be where the name is. */ .clause__margin--stack{width:20ch;line-height:1.7} .skill__marks{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)} a.stamp--sheet{transition:border-color var(--t-link) linear} a.stamp--sheet:hover{border-color:var(--ink)} /* the attestation line. Small, so it takes ink at 86% (4.77:1) and never 60% — a date a buyer is asked to trust is not decoration. */ .trustline{ font-size:var(--t-13);line-height:var(--lh-13);letter-spacing:var(--ls-13); color:var(--ink-86);font-variant-numeric:tabular-nums;margin-top:var(--s-3); } /* ── 12.2 THE DEFINITION LIST — the input schema, and best fit ──────── Two columns ruled on --sheet-deep, exactly like §7's .ruled: a term and what it means. The term is , which the system already allows on the sheet, minus its underline — an identifier is not a link, and the buyer has to be able to read `draft` as the literal field name they will send. This is catalogue metadata and nothing else: the schema describes the shape of the inputs, never the method that consumes them. */ .deflist,.deflist__hd{ display:grid;grid-template-columns:minmax(0,17ch) minmax(0,1fr); column-gap:var(--s-4);max-width:64ch; } .deflist__hd{ font-size:var(--t-13);line-height:var(--lh-13);letter-spacing:var(--ls-13); text-transform:uppercase;color:var(--ink-86); margin-top:var(--s-4);padding-bottom:var(--s-2); } .deflist dt,.deflist dd{border-top:1px solid var(--sheet-deep);padding-block:var(--s-3)} .deflist dt{color:var(--ink)} .deflist dt code{border-bottom:0;color:var(--ink)} .deflist dd{font-size:var(--t-17);line-height:var(--lh-17);color:var(--ink-86)} .deflist__tag{ display:block;font-size:var(--t-13);line-height:var(--lh-13); letter-spacing:var(--ls-13);text-transform:uppercase;color:var(--ink-86);margin-top:4px; } /* ── 12.3 TYPE INSIDE A CUT ────────────────────────────────────────── §3 gives an aperture a label and a paragraph. The detail view also needs a heading and a long mono footnote, and both are used enough here to be system objects rather than one-off styles. */ .cut-h{ font-family:var(--font-display);font-size:var(--t-17);line-height:var(--lh-17); color:var(--aperture-ink);margin-bottom:var(--s-2); font-stretch:var(--stretch-wide);font-weight:var(--wght-med); } /* Scoped to .aperture on purpose. A cut-note is BY DEFINITION inside a cut, and .aperture p (0,1,1) outranks a bare .cut-note (0,1,0) — so every

was silently rendering as 15px display type at full aperture ink instead of the 13px mono footnote specified here. It looked deliberate, which is why it survived a build and an audit. (0,2,0) beats (0,1,1) on class count, so this now wins wherever it is actually used. */ .aperture .cut-note, .cut-note{ font-family:var(--font-mono);font-size:var(--t-13);line-height:1.7; letter-spacing:var(--ls-mono);color:var(--aperture-ink-2); font-variant-numeric:tabular-nums;margin-top:var(--s-3); } .aperture .cut-note a, .cut-note a{color:var(--aperture-ink);border-bottom:1px solid var(--aperture-ink-2)} .cut-note a:hover{border-bottom-color:var(--aperture-ink)} /* run-in emphasis inside a cut is the width axis, as it is on the sheet */ .aperture p b{ color:var(--aperture-ink);font-weight:400; font-stretch:var(--stretch-wide);font-weight:var(--wght-med); } /* SECONDARY AND TERTIARY BUTTONS INSIDE A CUT. §4 already fixed the primary button inside an aperture (it was --aperture on --aperture, 1.00:1). The same argument applies to the other two: .btn--cut and .btn--text are drawn in INTAGLIO ink, which is the wrong stock once they are inside a cut, and on a light colourway it is the wrong POLARITY — dark ink on near-black. They flip to aperture ink, with --aperture-edge (3.33:1) carrying the boundary. styleguide.html's one in-cut secondary already patched this inline; this generalises it. */ .aperture .btn--cut{color:var(--aperture-ink);border-color:var(--aperture-edge)} .aperture .btn--cut:hover,.aperture .btn--cut:active{border-color:var(--aperture-ink);color:var(--aperture-ink)} .aperture .btn--text{color:var(--aperture-ink);border-bottom-color:var(--aperture-ink-2)} .aperture .btn--text:hover{border-bottom-color:var(--aperture-ink)} /* a