/* marrow-technologies.com Hand authored. No framework, no build step, no third party request. Tokens are DEEP FIELD, brand/identity/v3/PALETTE-V3.md, locked 2026-08-29 as the canonical system and superseding every earlier direction. The page ground is Depth, a deep blue field. Long form prose surfaces run Limestone. The single accent is Signal, a bright blue, and it appears only where a person acts: the primary action, links, the focus ring, the core of the mark. The palette is blue throughout and the warm accent of the previous system is retired, not repriced. There is no red in this brand, none, including errors. Held and error states are structure and words, a heavier boundary in the strongest neutral plus a written message, because the gate holding is the product working, not an alarm. Pending and engine states are typography, never colour. THE POP, AND ITS LIMIT. Numerals, words and actions come forward, and the mechanism is contrast, weight and scale, never saturation spread across a surface. Glow is permitted on exactly three things: the primary action, the core of the mark, and the register numerals the page is counted by. Anywhere else it reads cheap. A screen with no human action on it carries no accent and no glow. Every text and background pair in use is measured in contrast-report.md by contrast-check.py in this directory. Re-run before changing a pair. Craft mechanics carried forward from research/03-website-craft.md: a 4px spacing ladder, display type up to 4.5rem with tight leading, layered low alpha shadows, monospace labels one step smaller than the sans they pair with, hover transitions at 160ms on an ease out curve touching colour only, and one entrance pattern, a 14px rise with fade, honoured fail safe under prefers-reduced-motion by making the finished frame the default. */ /* ---------- the serif, self hosted ---------- Charis 7.000, SIL Open Font License 1.1, served from this site's own fonts directory with its OFL.txt beside it. Self hosted so every visitor sees the same face: the previous stack resolved to Charter on macOS and Georgia on Windows, which split the brand by platform. Charis is the Charter lineage face with a genuine SemiBold, so the 600 weight below is drawn, not synthesised. woff2 only, both files first party, so the privacy page's no third party requests claim holds. */ @font-face { font-family: "Charis"; src: url("../fonts/Charis-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Charis"; src: url("../fonts/Charis-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { /* ----- the palette, by name. PALETTE-V3.md, Deep Field ----- */ --depth: #071026; /* page ground dark, primary text on light */ --depth-raised: #0D1B3D; /* raised surface on dark, the gate card body */ --depth-lifted: #14264F; /* second raise, hover, tonal rules on dark */ --tideline: #426AB2; /* boundaries and strokes on dark, non text */ --tide: #9DB0D6; /* secondary text on dark */ --daylight: #EEF2FB; /* primary text on dark */ --limestone: #EDF1F8; /* page ground, light sections */ --shell: #F7F9FD; /* raised light surface, cards and inputs */ --steel: #46587E; /* secondary text on light */ --boundary: #7286AD; /* interactive boundaries on light, non text */ --hairline: #C9D3E6; /* decorative rules on light, never a boundary */ --signal: #4DA3FF; /* THE ACCENT on dark. Primary action, links, focus, the core */ --signal-bright: #8FCBFF; /* the top stop of a core or wall gradient, and the action hover */ --signal-deep: #1257C4; /* the accent on light. Links and text sized use */ /* TIDELINE IS ONE STEP LIGHTER THAN PALETTE-V3.md's #2E4A80, AND THE REASON IS MEASURED, NOT TASTE. Tideline's job in the ladder is "boundaries and strokes on dark, non text", and one of those strokes is the quiet button's border, which is a real user interface component boundary and therefore owes 3:1 against its own ground. #2E4A80 on Depth measures 2.17:1 and fails that floor. #426AB2 is the same hue and the same saturation lifted in lightness alone, and it measures 3.54:1 on Depth and 3.17:1 on Depth Raised. The palette document states the 3:1 rule for this token and then names a value that cannot meet it; this resolves in favour of the rule. Verified by contrast-check.py in this directory. */ /* ----- the tonal ladder ----- Depth, Depth Raised, Depth Lifted, Tideline, Steel, Tide, Hairline, Limestone, Daylight, Shell. Ten steps, one job each, per PALETTE-V3.md. No rule below borrows a step for a neighbouring job. Signal, Signal Bright and Signal Deep sit outside the ladder because the accent is an event, not a surface. The accent appears only where a person acts or acted: links, the primary action, the focus ring, the release stamp. It never decorates. A screen with no human action has no accent. */ --serif: "Charis", Charter, "Bitstream Charter", "Iowan Old Style", Georgia, Cambria, "Times New Roman", Times, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* 4px spacing ladder. Every gap on the page resolves to one of these. */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem; --measure: 68ch; /* body measure, within the 65 to 75 character cap */ --page: 72rem; /* page grid width */ --gutter: 1.5rem; /* ----- the type scale ----- Fixed steps below display, fluid above it. The fixed steps ride a ratio of 1.125 around the 17px body and live here as tokens so no ad hoc size appears again. The display steps push the top of the scale well past the first cut of this site: the loudest line runs 112px and the quietest label 12px, which takes the loud to quiet ratio from roughly 6.5:1 to 9.3:1. That stretch is the single biggest lever in the design direction, and it is why the page can carry its structure in type alone with no new device. */ /* REVISED in the instrument pass, 2026-08-27, per design direction V2 section 6.2. The display end stretches further and the instrument end does not, which is what a futuristic register looks like when it is built from type instead of chrome: bigger voice, wider ratio. The loud to quiet ratio moves from roughly 9.3:1 to roughly 10.7:1. Three values change, one token is added, nothing else in the scale moves. */ /* REVISED AGAIN in the Deep Field pass, 2026-08-29. The brief is that the type comes forward, and the mechanism for that is scale and weight, not colour, so the loud end of the scale stretches once more and the quiet end does not move at all. The loud to quiet ratio goes from roughly 10.7:1 to roughly 12:1. Four values change, nothing else in the scale moves, and no new step is added. */ --t-statement: clamp(3.25rem, 1.35rem + 9.2vw, 9rem); /* the band line, the loudest type on the site */ --t-display: clamp(3rem, 1.3rem + 6.7vw, 6.5rem); /* the h1 of index and pricing */ --t-h2: clamp(2.25rem, 1.15rem + 3.6vw, 3.75rem); /* section openings */ --t-index: clamp(2rem, 1.25rem + 2.2vw, 3.25rem); /* the register numeral, a signature element */ --t-h3: 1.25rem; /* subheads inside a section */ --t-refusal: clamp(1.4375rem, 1.15rem + 1vw, 1.75rem); /* the six refusal heads */ --t-lede: clamp(1.25rem, 1.05rem + 1vw, 1.5rem); /* ledes only */ --t-body: 1.0625rem; /* body. unchanged, it is right */ --t-ui: 0.9375rem; /* nav, form labels, quiet interface */ --t-small: 0.875rem; /* captions, notes, secondary rows */ --t-mono: 0.8125rem; /* record rows, artifact chrome, figures */ --t-label: 0.75rem; /* eyebrow labels. the floor of the scale */ /* ----- the named vertical intervals ----- The 4px ladder above stays the atomic unit. On top of it, eight named intervals, and every vertical gap on the site resolves to one of them. This is what makes a long scroll feel composed rather than assembled. They are redefined once, at the narrow breakpoint, so one rule drops the whole page a step instead of six overrides. THREE OF THESE WERE ADDED IN THE DEPTH AND FLOW PASS, and each one replaced a value that had been written ad hoc at the point of use. The eyebrow gaps were s4 on a section head, s4 on a document title and s5 on a display headline, three literals in three places with no stated reason for the difference; they are now two named intervals with the difference stated, which is that a nine rem display line needs more air under a twelve pixel label than a two rem heading does. The hinge and the lift are new, and they are what the band transitions are built out of. THE ONE INTERVAL THAT IS NOT ON THE LADDER IS --v-stack, AND IT IS LEFT ALONE DELIBERATELY. 1.1rem is a leading derived interval, set against the 1.65 body line height so a paragraph break reads as slightly more than one line of air; snapping it to 1rem to satisfy the ladder would be the ladder governing typography, which is the wrong way round. Every other gap on this site resolves to the ladder. This one resolves to the type. */ --v-band: var(--s10); /* the hero and the statement band */ --v-section: var(--s9); /* every numbered section, and every band opening */ --v-head: var(--s7); /* a section head to its content */ --v-block: var(--s6); /* sibling blocks inside a section */ --v-stack: 1.1rem; /* paragraphs in a stack. see the note above */ /* The band hinge. The height of the .waterline and .waterline-up elements, which are the only places on the site where the ground changes, and therefore the whole budget the transition has to spend. Four rem, and the value was MEASURED BY RENDERING, not chosen: at the twenty one pixels this replaced the ramp read as four stripes, and at three rem with the ladder evenly spaced it read as a glowing blue bar, which is worse than a cut because it is a cut wearing decoration. Both were looked at, at 1440, before this value was set. Sixty four pixels is what lets the near black half of the ramp run long enough to read as travel while the bright crossing stays a line. */ --v-hinge: var(--s8); /* The band lift. How far the light a band catches on its own top edge reaches before it decays to that band's flat ground. Six rem, which is one section's opening padding, so the lift is always spent inside the air above the first line of a band and never under its copy. */ --v-lift: var(--s9); /* A section label to the heading under it. Two steps, and the reason for two is scale: the display heads carry the extra rung. */ --v-eyebrow: var(--s4); --v-eyebrow-display: var(--s5); /* ----- THE ELEVATION MODEL. Three steps, one light source ----- The tonal ladder already named three grounds, Depth, Depth Raised and Depth Lifted on the dark side and Limestone, Shell on the light. Until this pass they differed in VALUE alone, which is a nominal step and not a visible one: a Shell card on Limestone is four percent lighter than the paper it sits on, and a reader reads that as a slightly different rectangle, not as a raised object. Depth is what the owner asked for and depth is light behaviour, so each step now carries a shadow AND an edge, and the two together are what make the step read. ONE LIGHT SOURCE, FROM ABOVE, AND IT GOVERNS EVERY DEVICE BELOW. A surface that stands above its ground catches light on its top edge and casts a shadow beneath it. That is why every raised surface here takes a lit inner top edge plus layered shadow, why the gate strip inside the gate card takes the INVERSE, a dark inner top edge, because a well cut into a surface is lit from its far lip and shadowed at its near one, and why every band on the page is lightest at its own top edge. The footer's Depth Lifted top border has drawn that same lit edge since the first cut; this pass simply states the rule the border was already obeying and applies it everywhere. LAYERED, NEVER ONE HARD DROP. Every shadow below is three or four stacked layers at increasing blur and decreasing alpha: a hairline ring that defines the edge, a tight contact shadow, a mid cast, and a wide ambient. One 6px drop shadow reads as a sticker. Four layers read as an object in a room. TINT ON PAPER, PLAIN ON WATER. Shadows on the light grounds are tinted with the Depth hue, never flat black, because a neutral grey shadow on a blue white paper reads dirty. On the dark grounds the shadow is plain black, because tinting has no meaning against near black water. THE CAP, AND IT IS WHAT KEEPS THE CONTRAST REPORT HONEST. Every decorative LIGHTENING of a dark ground in this sheet, the band lifts and the lit top edges both, composites no lighter than DEPTH RAISED, and every decorative lightening of a light ground composites no lighter than SHELL. Both of those are real ladder steps whose text pairs are already measured in contrast-report.md, so no device below can move any pair off its measured floor: the worst case a reader ever meets is already in the table. Tideline, the quiet button's boundary, is the binding constraint and the reason the dark cap is Depth Raised rather than Depth Lifted: it measures 3.17:1 on Depth Raised and only 2.77:1 on Depth Lifted, so Depth Lifted as a lift ceiling would have put a real component boundary under the 3:1 floor. Measured, not assumed, and both pairs are in the report. */ /* Raised, on the light grounds. Shell over Limestone, plus the edge. */ --shadow-card: 0 0 0 1px rgba(7, 16, 38, 0.09), 0 1px 2px rgba(7, 16, 38, 0.07), 0 6px 14px rgba(7, 16, 38, 0.06), 0 20px 44px rgba(7, 16, 38, 0.05); /* Lifted, on the light grounds. The second step: the row a reader is holding, and an input under the caret. Same four layers, wider and one shade more committed, so the step between raised and lifted is itself visible rather than nominal. */ --shadow-card-lifted: 0 0 0 1px rgba(7, 16, 38, 0.13), 0 2px 4px rgba(7, 16, 38, 0.09), 0 12px 28px rgba(7, 16, 38, 0.08), 0 32px 72px rgba(7, 16, 38, 0.07); /* An input is a raised surface too, but a quieter one: it sits in a form among other inputs and a card shadow on every field would read as a stack of cards rather than as a set of fields. Two layers, no ring, because the input already draws its own Boundary border. */ --shadow-input: 0 1px 2px rgba(7, 16, 38, 0.05), 0 4px 10px rgba(7, 16, 38, 0.04); /* Raised, on the dark ground. The lit top edge is Tide at low alpha, which composites to a hairline no lighter than Depth Raised on a Depth Raised surface, and the ring is Depth Lifted, the ladder's own named tonal rule on dark. */ --shadow-raised-dark: inset 0 1px 0 rgba(157, 176, 214, 0.15), 0 0 0 1px var(--depth-lifted), 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.30), 0 24px 56px rgba(0, 0, 0, 0.24); /* Lifted, on the dark ground. Reserved for the one element that genuinely floats over the page rather than sitting in it: the ledger, which is fixed to the viewport. A brighter top edge and a deeper cast, because an object further from its ground is lit harder and shadowed wider. */ --shadow-lifted-dark: inset 0 1px 0 rgba(157, 176, 214, 0.22), 0 0 0 1px var(--depth-lifted), 0 2px 4px rgba(0, 0, 0, 0.40), 0 14px 32px rgba(0, 0, 0, 0.34), 0 36px 80px rgba(0, 0, 0, 0.28); /* Recessed, on the dark ground. The inverse of raised, and the only device on the site that goes DOWN: a well cut into a raised surface is shadowed at its near lip and lit at its far one. Spent once, on the gate strip inside the gate card, because the gate is literally a slot the work sits in. */ --shadow-recess-dark: inset 0 2px 5px rgba(0, 0, 0, 0.42), inset 0 -1px 0 rgba(157, 176, 214, 0.09); /* ----- the glow, and it is rationed ----- Three layers of the accent at low alpha, so the light around the primary action reads as light and not as a coloured border. It is spent on the primary action, the core of the mark, and the register numerals, and nowhere else. These are decorative shadows: they carry no contrast duty and they replace no measured pair. */ --glow-action: 0 1px 2px rgba(7, 16, 38, 0.40), 0 4px 14px rgba(77, 163, 255, 0.24), 0 12px 34px rgba(77, 163, 255, 0.16); --glow-action-hover: 0 1px 2px rgba(7, 16, 38, 0.40), 0 6px 20px rgba(77, 163, 255, 0.38), 0 18px 48px rgba(77, 163, 255, 0.24); --glow-numeral: 0 0 20px rgba(77, 163, 255, 0.38); /* THE HEADER'S ACTION TAKES A SHORTER GLOW, AND THE REASON IS GEOMETRY. The standing action sits inside a sticky bar with 16 px of padding under it, and the full glow's widest layer reaches 12 plus 34, which is 46 px. On the document pages the bar sits directly on Limestone, so that spill painted a blue rectangle of haze on the paper below the header edge, which is exactly the cheapness the palette bans. Clipping the header was rejected: overflow hidden would clip the focus ring too, and an accessibility affordance is not paying for a decoration. These layers reach 12 px at rest and 15 px on hover, both inside the 16 px, so the light stays on the bar's own Depth ground. */ --glow-action-compact: 0 1px 2px rgba(7, 16, 38, 0.40), 0 2px 10px rgba(77, 163, 255, 0.30); --glow-action-compact-hover: 0 1px 2px rgba(7, 16, 38, 0.40), 0 3px 12px rgba(77, 163, 255, 0.45); /* Motion tokens. One easing for everything, an ease out. */ --ease: cubic-bezier(0.25, 1, 0.5, 1); --t-hover: 160ms; --t-enter: 400ms; } /* ---------- reset, minimal ---------- */ *, *::before, *::after { box-sizing: border-box; } /* No faux bold and no faux italic, ever. Charis ships a drawn 600 and the mark is outlined paths, so a synthesised weight anywhere would be exactly the silent default this site exists to have none of. accent-color is set once so any future native control inherits the doctrine instead of shipping a default blue. */ html { -webkit-text-size-adjust: 100%; font-synthesis: none; accent-color: var(--signal-deep); } /* The page ground is the interior at working depth. Dark first. */ body { margin: 0; background: var(--depth); color: var(--daylight); font-family: var(--sans); font-weight: 400; font-size: var(--t-body); /* 17px, above the 16px minimum */ line-height: 1.65; text-align: left; } /* Light type on Depth renders optically heavy, so the dark grounds are smoothed and the light ground is reset to the platform default, where dark on light needs its full weight. */ body, .dark, .statement { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .light { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* Selection is designed. Both pairs are already measured: Daylight on Depth Lifted at 9.44:1, Shell on Depth at 15.40:1. A reader who selects text to copy it, and this one will, sees the system hold. */ ::selection { background: var(--depth-lifted); color: var(--daylight); } .light ::selection { background: var(--depth); color: var(--shell); } h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; } img, svg { display: block; max-width: 100%; } /* ---------- type ---------- Serif display carries the page. Serif at 400 and 600 only, no letter spacing on the serif, sentence case always. */ h1, h2, h3 { font-family: var(--serif); letter-spacing: 0; /* no letter spacing on the serif */ font-kerning: normal; text-rendering: optimizeLegibility; } /* The h1 carries no ch cap. The headline owns the full wrap width and its break is authored in the markup, so a measure cap here would fight the authored shape. */ /* THE DISPLAY SERIF NOW RUNS AT 600. The first cut ran the h1 at 400 and let size do the work alone, which read considered but timid at the top of a dark screen where light type goes optically thin. Charis ships a DRAWN SemiBold, loaded above, so this is a real weight and not a synthesised one, and font-synthesis is off, so if the file ever failed to load the browser would fall back rather than smear. The leading tightens with the weight, because a heavier face at the same leading reads loose. Confident, not shouted. */ h1 { font-weight: 600; font-size: var(--t-display); line-height: 0.99; letter-spacing: -0.014em; /* optical only, the display end of a serif needs it back */ max-width: none; } /* THE DISPLAY CEILING IS 6.5rem AND IT IS SET BY THE COPY, NOT BY TASTE. The index h1 carries an authored break and the copy may not move, so the ceiling is whatever size still lets the first clause break into two full lines. Measured in headless Chrome at 1440, 1280 and 1100, on the real sentence: at 7rem SemiBold the first clause takes THREE lines and leaves "person." alone on one, an orphan and a ragged shape. At 6.5rem it takes two, and the whole headline stands 412 px, which is the exact height the 400 weight 6.25rem cut stood at before this pass. So the headline is bigger and heavier and costs the first screen nothing. Re measure before raising this, and re measure if the sentence ever changes. */ /* Balance, plus the cap, and nothing else. No manual breaks in an h2: the words change and a forced break would outlive its sentence. */ h2 { font-weight: 600; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.008em; max-width: 28ch; text-wrap: balance; } h3 { font-weight: 600; font-size: var(--t-h3); line-height: 1.3; text-wrap: balance; } /* The authored break in the h1 is neutralised at and below 40rem, so the display floor wraps naturally instead of forcing a short line. */ @media (max-width: 40rem) { /* h1 br removed 2026-08-30: the hero headline is one sentence with no authored break, so this rule matched nothing. The only br on the page is in .statement-line, which is a p and was never in scope here. */ /* The display floor drops on a phone. At the 3rem floor the two sentence headline ran six lines and consumed the whole first screen, so a phone reader met chrome and a headline and no product, no lede, and nothing to act on. The words are the copy deck's and do not move, so the type yields instead. Measured, not guessed: this value is the one that puts the opening of the body copy on the first screen at 390 by 844. */ h1 { font-size: clamp(2.375rem, 1.1rem + 4.8vw, 3rem); } } p, li, dd, dt { max-width: var(--measure); } /* 58ch, not 62: at this size the lede reads as a set block rather than a loose paragraph. Hanging punctuation is a Safari progressive enhancement, free where unsupported, and visible to exactly the reader this page is for. */ .lede { font-family: var(--serif); font-weight: 400; font-size: var(--t-lede); line-height: 1.45; color: var(--tide); max-width: 58ch; font-kerning: normal; text-rendering: optimizeLegibility; hanging-punctuation: first allow-end; } .secondary { color: var(--tide); } /* All caps only as a small label above a section. Sans at 500, generous letter spacing. Never a headline, never a sentence. */ .label { font-family: var(--sans); font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tide); } /* THE REGISTER NUMERAL, promoted to instrument scale in the instrument pass. This site has zero public clients and zero measured results, so it has no honest statistics row, and the large tabular figures that would carry that energy are the page's OWN register numerals, 01 through 05. They are true by construction: they count the sections a reader can see. The numeral now sits ABOVE its label rather than beside it, so the caption relationship survives at the new size, and it still carries no accent, because engine numbering is typography and never colour. Any number on this site that is not a published price or a section numeral is a defect. */ /* DEEP FIELD PASS. The numeral takes the register's own strongest text colour rather than the label's secondary, and it is set at 600 rather than 500, so it separates from the caption under it by weight and by value instead of by size alone. It carries no hue: an engine numeral is typography, never colour, which is the rule that has held since the first cut. THIS IS GLOW NUMBER THREE OF THE THREE THE PALETTE PERMITS, and it is spent only on the dark grounds, where a low alpha blue halo behind a figure reads as an instrument lit from behind. On the light band there is no glow at all: glow on a paper ground is the exact cheapness the palette bans, and there the numeral carries by weight and by Depth on Limestone at 16.68:1, which is the loudest pair the site owns. */ .label .idx { display: block; font-family: var(--mono); font-weight: 600; font-size: var(--t-index); line-height: 1; letter-spacing: 0.01em; margin: 0 0 var(--s2) 0; color: var(--daylight); text-shadow: var(--glow-numeral); font-variant-numeric: tabular-nums; } .light .label .idx { color: var(--depth); text-shadow: none; } /* The monospace carries anything that reads as a record. */ .mono { font-family: var(--mono); font-weight: 400; font-size: var(--t-mono); font-variant-numeric: tabular-nums; } /* THE ONE COLOURED WORD. The accent rule protects a MEANING, the point of human release, not a set of element types, so a word that IS the release may wear the accent in a display line. Bound by the four clause test in design direction V2 section 4, which currently yields exactly one such word on the whole site. font-style is normalised because no italic file ships and font-synthesis is off; the em element is here for the semantic stress, not for a slant. Signal on the dark grounds at 7.20:1, Signal Deep on the light grounds at 5.82:1, both already in the report. */ .act { font-style: normal; color: var(--signal); } .light .act { color: var(--signal-deep); } /* ---------- links ---------- Links run the accent because a link is a person acting. Signal on the dark ground, Signal Deep on light, measured in the report. */ /* The colour of a link never changes on hover. The weight of the line is the whole response, which is as much as a passive page should ever answer with. */ a { color: var(--signal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; text-decoration-skip-ink: auto; transition: text-decoration-thickness var(--t-hover) var(--ease); } a:hover { text-decoration-thickness: 2px; } :is(a, button, input, textarea, summary):focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } .light :is(a, button, input, textarea, summary):focus-visible { outline-color: var(--signal-deep); } /* ---------- buttons ---------- THE PRIMARY ACTION IS THE LOUDEST THING ON ANY SCREEN, and that is a deliberate reversal of the first cut, where the light band's primary action was the strongest neutral and the dark band's was the accent. One action reads one way on every ground now: a solid Signal fill with Depth text at 7.20:1, a square, and the rationed glow beneath it, so a reader who has scrolled into the light band and back out again meets the same door twice rather than two different doors. The glow is three low alpha layers of the accent itself, which reads as light around the object rather than as a second border. Hover is a real response, not a tint: the fill goes to Signal Bright, which is Depth at 10.94:1 and therefore LOUDER rather than merely different, and the glow widens. The 1px lift lives in the reduced motion query at the foot of this sheet, so a reader who asks for no motion still gets the whole colour and light response and simply gets it without the rise. Border radius stays zero, by law. */ .btn { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.005em; line-height: 1; text-decoration: none; border-radius: 0; padding: 0.95rem 1.9rem; cursor: pointer; transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), color var(--t-hover) var(--ease); } .btn-primary, .light .btn-primary { color: var(--depth); background: var(--signal); border: 1px solid var(--signal); box-shadow: var(--glow-action); } .btn-primary:hover, .light .btn-primary:hover { background: var(--signal-bright); border-color: var(--signal-bright); box-shadow: var(--glow-action-hover); } .btn-quiet { color: var(--daylight); background: transparent; border: 1px solid var(--tideline); /* Tideline encloses on dark */ } .btn-quiet:hover { background: var(--depth-raised); border-color: var(--tide); } .light .btn-quiet { color: var(--depth); border-color: var(--boundary); /* Boundary encloses on light. Hairline never does */ } .light .btn-quiet:hover { background: var(--shell); } /* ---------- skip link ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--daylight); color: var(--depth); padding: 0.75rem 1.25rem; z-index: 30; } /* 4px, not 0: at zero the 2px ring at 2px offset paints its left and top edges outside the viewport and clips. A clipped focus ring is exactly the kind of accident this page is inspected for. */ .skip-link:focus { left: 4px; top: 4px; } /* ---------- layout ---------- */ .wrap { max-width: var(--page); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } section { padding: var(--v-section) 0; } /* At 390 the gutter and the two loudest intervals each drop one step. Redefining the tokens rather than overriding the rules means every surface that resolves to an interval moves together. */ @media (max-width: 40rem) { :root { --gutter: 1.25rem; --v-band: var(--s9); --v-section: var(--s8); /* The hinge and the lift drop with everything else, and they drop for the same reason: a phone screen is 844 px tall, and a 48 px transition plus a 96 px lift would spend a fifth of a viewport on a boundary. Two rem still gives the ramp six pixels a step. */ --v-hinge: var(--s7); --v-lift: var(--s8); } } /* THE PHONE HEADER. On a phone the full five entry nav wrapped to two rows and stood the header at 174px, 21 percent of the viewport, all of it chrome. The direction's no hamburger and no menu script rules both stand: nothing here is hidden behind a control. What changes is that the header stops carrying navigation a phone reader does not need. The page is five sections and scrolling reaches all of them, the footer carries the complete set, and the one link worth a permanent slot is the one that starts a conversation. A visitor on a phone needs the pitch, not a table of contents. */ /* REVISED in the instrument pass. The phone header was one bare Contact text link; it is now the lockup and the standing filled action, one row, both targets clearing 44px. That is a stronger trade than it looks: the surviving link stops being a word and becomes the page's actual door, and the full nav still lives in the footer. No hamburger and no menu script, as before: nothing here is hidden behind a control. */ @media (max-width: 40rem) { .site-nav { display: none; } /* 15px at line-height 1 plus 2 x 0.9rem of padding plus the 1px border measures 46px, above the 44px floor. Measured, not assumed. */ .site-header .btn-compact { padding: 0.9rem 1.1rem; } /* The lockup is the header's other target and it is a link, so it clears 44px too. The mark itself does not grow: the anchor gains height and centres the 26px mark inside it, which leaves the identity's rendered geometry untouched and costs the header 18px. Measured at 390: the header stands 146px, 17 percent of an 844px viewport, against the 174px the old five entry nav stood at. ONE ROW WAS NOT POSSIBLE HERE, and the arithmetic says so rather than taste. The direction asks for the lockup and the action on one row at this width. At 390 the measure inside the gutters is 350px, the lockup renders 253px wide and may not go below the identity's own 180px minimum, and the action measures 181px. 253 plus 181 is 434, and even at the identity's floor 180 plus 181 is 361. Neither fits. They wrap to two rows, which is what flex wrap already does, and both targets clear 44px on both rows. */ .lockup { min-height: 44px; } } /* ---------- the seam rule ---------- Derived from the identity's own geometry, which is what makes it impossible to generate: the icon's seam crosses the sixteen unit square as a two step offset, its horizontals at units 7 and 9. The step lands at 9/16 of the width, x 900 of a 1600 unit box, and drops 8 units of a 12 unit box, which is 8 CSS pixels at the fixed 12px height, two rungs of the 4px ladder. preserveAspectRatio none stretches it to the measure and vector-effect keeps the stroke a hairline at every width, so the step's proportions hold from 320 to 1440 without a media query. Inset and width are the plain rule's, byte for byte, because a rule in a document respects the document's margin. Colours are the plain rule's too, a tonal step on dark and Hairline on light, so this device adds no pair to the report. The drawn line is the DEFAULT state: the dash offset that lets it draw itself lives inside the no-preference query, under html.js, so print, reduced motion, and script blocked readers all get a finished line and never a blank strip. */ .seam { margin: 0 auto; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--page) - 2 * var(--gutter)); } .seam svg { display: block; width: 100%; height: 12px; } /* 1608 user units: 900 across, 8 down, 700 across. Stated, not guessed. */ /* THE DARK STROKE MOVES FROM DEPTH LIFTED TO TIDELINE, and it is a correction rather than a preference. Depth Lifted on Depth measures 1.28:1, which is not a quiet line, it is an ABSENT one: sampled off a 1440 render the stroke reads rgb(13, 27, 58) against a rgb(7, 16, 38) ground and cannot be seen at 100 percent, let alone at a scroll. A section rule nobody can see contributes nothing to a page whose whole complaint was that it read flat. Tideline is the right value and it is not a new decision, it is the one this sheet already made everywhere else: --tideline's stated job in the ladder is boundaries and strokes on dark, and every other ornament on a dark ground here already uses it, the hero signature bar and the rail label's own mark included. The seam was the single exception. It adds no pair to the report either, which was the original rule's whole reason for borrowing the plain rule's colour: Tideline on Depth is already measured at 3.54:1 non text in contrast-report.md. The light stroke does not move. Hairline on Limestone is a rule a reader can already see, which is the entire test being applied here. */ .seam path { stroke: var(--tideline); stroke-dasharray: 1608; stroke-dashoffset: 0; } .light .seam path { stroke: var(--hairline); } /* Decorative rule between sections. On the dark ground the rule is a tonal step of the same water. Inside a light band it is Hairline. It separates. It never encloses. At a ground change there is no rule at all, the surface change is the separation. */ /* Inset to the wrap width. A rule in a document respects the document's margin; a full bleed rule is a screen habit, not a document habit. */ .rule { border: 0; border-top: 1px solid var(--depth-lifted); margin: 0 auto; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--page) - 2 * var(--gutter)); } .light .rule { border-top-color: var(--hairline); } /* ---------- the light band ---------- Long form reading surfaces run Limestone, per PALETTE.md: the hero, the model, the covenant, and the close of the page hold the depth, and the prose middle surfaces into daylight. Stone, not clinical paper. */ /* The ground is restated in the band transitions block near the foot of this sheet, where it gains the two gradient layers that carry a reader into and across it. This rule is the colour half and stays here with the band's other colour rules. */ .light { background-color: var(--limestone); color: var(--depth); } .light .lede { color: var(--steel); } .light .secondary { color: var(--steel); } .light .label { color: var(--steel); } .light a { color: var(--signal-deep); } .section-head { margin-bottom: var(--v-head); } .section-head h2 { margin-top: var(--v-eyebrow); } .section-head .after { margin-top: var(--s5); } /* A block that follows another block inside a section, and the quiet text link that closes one. Both resolve to a named interval, which is what the two inline style attributes on this site used to do badly. An inspectable page has no inline styles. */ .split-block { margin-top: var(--v-block); } .after-block { margin-top: var(--v-block); } /* A section whose specified opening line is long runs a wider heading measure, so the line breathes instead of stacking six deep. */ .section-head.wide h2 { max-width: 36ch; } .two-col { display: grid; gap: var(--s6) var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); /* Stretch, not start. The two lists in a split are rarely the same length, and two cards ending at different heights read as an accident rather than a composition. Equal frames say the two columns are one drawn comparison. The shorter list simply ends, which is honest: nothing is padded to fake symmetry. */ align-items: stretch; } .stack > * + * { margin-top: var(--v-stack); } .stack-loose > * + * { margin-top: var(--s6); } /* ---------- header ---------- Sticky, translucent over the depth, tonal bottom rule. The one piece of persistent chrome, so the contact path is always one click away. The header holds the depth on every page, including the light document pages, so the brand ground frames every surface. */ .site-header { position: sticky; top: 0; z-index: 20; padding: 1rem 0; /* Solid, not glass. Blur is on the banned list, a solid ground is cheaper to composite, and a reader who inspects will notice. */ background: var(--depth); border-bottom: 1px solid var(--depth-lifted); } /* Lockup, air, nav, action. The nav is pushed off the lockup by auto margin rather than by space-between, so the nav and the standing action sit together on the right and the header reads as one hard working bar instead of three evenly spaced objects. */ .site-header .wrap { display: flex; align-items: center; justify-content: flex-start; gap: var(--s5); flex-wrap: wrap; } .site-nav { margin-left: auto; } /* THE PERSISTENT ACTION. Compact, square, filled. Depth on Signal is 7.20:1, in the report. It carries the same fill and the same glow one size down, not a different treatment, so the door is the same door wherever a reader meets it. */ .btn-compact { padding: 0.65rem 1.1rem; font-size: var(--t-ui); } .btn-primary.btn-compact { box-shadow: var(--glow-action-compact); } .btn-primary.btn-compact:hover { box-shadow: var(--glow-action-compact-hover); } /* Between the rail breakpoint and the phone breakpoint the nav takes its own row under the lockup, and the action stays in the top row on the right. order does that without moving a line of markup: the action is laid out second and the nav third, and a full width nav can only wrap. THE BOUNDARY MOVED FROM 63.999rem TO 65.5rem, AND IT IS MEASURED. The header's one row costs the lockup's 324 px plus a 24 px gap plus the 442 px nav plus a 24 px gap plus the 183 px action, which is 997 px, and the wrap's inner measure falls under that at 1045 px of viewport. Left at 63.999rem the nav would have wrapped BY ACCIDENT across the 1024 to 1044 band, losing the deliberate order that puts the action top right, and 1024 is one of the three widths this site is verified at. 65.5rem is 1048 px, just above the measured threshold, so the two row header is always the one this rule composes and never one flexbox fell into. Re measure this if the nav gains an entry or the lockup changes size. */ @media (max-width: 65.5rem) { .site-nav { order: 3; flex: 0 0 100%; margin-left: 0; } .site-header .btn-compact { order: 2; margin-left: auto; } } .lockup { display: flex; align-items: center; gap: 0.7rem; min-width: 0; /* so the lockup can yield rather than push the page wide */ text-decoration: none; color: var(--daylight); } /* THE HEADER LOCKUP IS COMPOSED FROM TWO ELEMENTS, NOT SCALED FROM ONE. brand/identity/v3/clear-space-and-usage.md section 4 measures the mark inside lockup-primary-reversed.svg at 0.0898 of the lockup's own width, so that single file placed at this header's 253 px would render the mark at 23 px against a tested floor of 32 px on dark, and the wall, the ring and the core would fuse into one blob. The document's own instruction is that the horizontal lockup is not used below 400 px wide. So the identity is set here the way the document says to set it: the icon inlined at its own size, and the wordmark beside it at a cap height that balances it. The icon is icon-reversed.svg, the dark ground translation, at 36 px, which clears the 32 px reversed floor and the 36 px light ground floor both, so the same size can move to a light surface later without a second measurement. The wordmark runs a 20 px cap, which puts its total ink at 29 px against the icon's 36 px. CLEAR SPACE, section 3: an icon needs a field 1.3 times its width and 1.4 times its height with nothing in the gap. At 36 px that is 5.4 px clear to each side and 7.2 px above and below. The flex gap below is 11.2 px and the header's own padding is 16 px, so both are cleared with room. Nothing may be moved into that gap. The gradient ids are the shipped files' own mt- prefixed ids, carried over verbatim rather than renamed, because the asset lane guarantees they are unique across all eight files and a rename here would break that guarantee the first time a second variant is inlined beside this one. */ .lockup .lockup-icon { display: block; width: 36px; height: 36px; flex: none; } /* 29 px of ink for a 20 px cap: the wordmark's drawn box runs 145 units from ascender to descender and its caps are 100 of them, so the ink height is the cap height times 1.45. Stated, not guessed, so the next person changing the cap can do the arithmetic rather than eyeball it. IT IS SIZED BY WIDTH WITH HEIGHT AUTO, AND THAT IS THE FIX FOR A REAL DEFECT. Sized by height with flex none, the wordmark could not shrink, and at a 320 px viewport the lockup pushed the document to 344 px and the whole page scrolled sideways. Measured, in headless Chrome, at 320, 360, 375 and 390. Sized by width and allowed to shrink, the SVG keeps its own ratio through the viewBox, so on the narrowest phones the type comes down with the measure instead of running off the edge. THE ICON NEVER SHRINKS: it keeps flex none, because it has a measured floor and the wordmark does not. A wordmark one step small is still a wordmark; a mark under its floor is mud. */ .lockup .lockup-word { display: block; width: 277px; height: auto; flex: 0 1 auto; min-width: 0; } /* The lockup is the icon locked to the wordmark, adopted 2026-08-26 on the owner's direction. It replaces the wordmark alone in the header, which is why the mark was invisible on every surface until now: the old one mark per surface law sent the icon to the favicon and nowhere else. The lockup's height is set by the icon, which stands above and below the cap line, and the icon's size is set by its own measured floor. */ .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; flex-wrap: wrap; } .site-nav a { font-family: var(--sans); font-weight: 500; font-size: var(--t-ui); color: var(--daylight); text-decoration: none; } .site-nav a:hover { text-decoration: underline; text-underline-offset: 0.2em; } /* The page you are on. Position is a state, not an act, so it does not wear the accent: it is drawn as a persistent rule in the text's own colour. */ .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--daylight); text-underline-offset: 0.2em; } /* At 390 the nav wraps to its own row under the wordmark and every target clears 44 by 44 px through padding, never margin, so the whole target is hittable. The negative inline margin keeps the first link's text on the same measuring edge as the wordmark. No hamburger and no menu script: showing the whole nav on a phone is a statement that the site is small enough to show itself. */ /* MEASURED, not assumed. At 390 the five nav labels total 478px of text and padding against 350px of available measure, so the nav takes two rows and the whole header stands 174px tall, which is 21 percent of a 390 by 844 viewport. A persistent chrome band that size is the opposite of the stillness this design argues for, so at and below this breakpoint the header stops being sticky and simply scrolls away with the page. Every prescribed value is untouched: the full nav is still shown, at the small step, with the 0.75rem 1rem tap padding, no hamburger and no menu script. Only the position changes, and the contact path stays one tap away through the hero's primary action and the footer nav. */ @media (max-width: 40rem) { .site-header { position: static; } .site-nav ul { gap: 0; margin-left: -1rem; } .site-nav a { display: block; font-size: var(--t-small); line-height: 1.6; padding: 0.75rem 1rem; } } /* ---------- hero ---------- Three tiers. The eyebrow and the headline span the full wrap width above the grid, so the display type is the monumental object the first viewport is organised around instead of being capped inside a seven column half. Below it the 7:5 split carries the lede, the two doors and the signature line against the gate, drawn live. This is the honest fix for a page that read as plain: it did not need more devices, it needed the headline allowed its size. */ .hero { padding: var(--v-band) 0 var(--v-section); } .hero-head h1 { margin-top: var(--v-eyebrow-display); } .hero-ctas { margin-top: var(--s6); display: flex; gap: var(--s4); flex-wrap: wrap; } .hero-line { margin-top: var(--s6); display: flex; align-items: center; gap: var(--s4); } .hero-line .mono { color: var(--tide); } /* The signature bar is an ornament, so it is drawn in the boundary neutral, never the accent. The accent is not decoration. */ .hero-line::before { content: ""; width: 2rem; height: 2px; background: var(--tideline); flex: none; } /* ---------- the limits ledger ---------- Lives in the light band. The numeral is the register, not the accent: the ledger describes what the engine will not do, and the engine never wears the accent. Reworked 2026-08-26 in the excitement pass. The six refusals are the most credible content on the page, so they are drawn at the scale of what they claim: the numeral runs large in the register mono, the refusal itself is set in the display serif at semibold, and the row a reader is holding raises onto Shell with the measured card shadow, the same raise every card on the light ground already uses. Depth on Shell and Steel on Shell are both in contrast-report.md. The negative inline margin gives the hover surface breathing room without moving a single glyph when the raise appears. */ .constraints { list-style: none; padding: 0; margin: 0; counter-reset: cons; } /* THE ROW A READER IS HOLDING RAISES, AND THIS PASS IS WHERE IT STARTED ACTUALLY DOING IT. The comment above this block has described the hover raise since the excitement pass of 2026-08-26 and NO RULE EVER IMPLEMENTED IT, which is a documented behaviour that did not exist: found while applying the elevation model, fixed here rather than noted. The inset padding and the matching negative inline margin are permanent and at rest, so the raised surface has breathing room around the words WITHOUT a single glyph moving when it appears. Nothing shifts on hover; only the ground under the row changes and a shadow arrives. The two up grid's column gap opens one step to s7 to pay for the two inset edges that now face each other across it. */ .constraints li { counter-increment: cons; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0 var(--s4); padding: var(--s5) var(--s3); margin-inline: calc(var(--s3) * -1); border-top: 1px solid var(--hairline); transition: background-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); } .constraints li:last-child { border-bottom: 1px solid var(--hairline); } /* Guarded on hover: hover, so a touch device never sticks a row in the raised state after a tap. Shell and the raised card shadow, the same step every card on the light ground takes, because this row IS a card for as long as a reader is on it. Depth on Shell 17.93:1 and Steel on Shell 6.63:1 are both in contrast-report.md, so the row reads better raised than it did flat. */ @media (hover: hover) { .constraints li:hover { background-color: var(--shell); box-shadow: var(--shadow-card); } } .constraints li::before { content: "0" counter(cons); font-family: var(--mono); font-weight: 600; font-size: 1.75rem; color: var(--depth); line-height: 1.25; font-variant-numeric: tabular-nums; } /* The refusals are the focal point of their screen, so they are set in the display serif at the refusal step and everything around them recedes: the numerals and the passages both run Steel, measured on Limestone in the report, so the six heads carry the section alone. */ .constraints .head { display: block; font-family: var(--serif); font-weight: 600; font-size: var(--t-refusal); line-height: 1.2; margin-bottom: 0.5rem; font-kerning: normal; text-rendering: optimizeLegibility; } .constraints .body { grid-column: 2; } .constraints .body p { color: var(--steel); } @media (max-width: 40rem) { .constraints li { grid-template-columns: 2.75rem minmax(0, 1fr); /* THE HOVER INSET IS GIVEN BACK ON A PHONE. At 1440 the s3 inset sits inside the rail's own column and costs nothing; at 390 the rows run the full measure, so a 12px negative margin would put the raised surface 8px from the viewport edge, outside the page's own gutter. A card that breaks the document margin is a card that looks like a mistake. The rows are full width here and need no breathing room because there is no second column facing them, and the raise itself is guarded on hover: hover, which almost no reader at this width has. Measured at 390: the row box returns to the 20px gutter, on the same edge as the heading and the prose above it. */ padding-left: 0; padding-right: 0; margin-inline: 0; } .constraints li::before { font-size: 1.125rem; line-height: 1.7; } .constraints .head { font-size: var(--t-refusal); } } /* ---------- the proof beat ---------- Set apart from the refusal list and in the same register: the list is what the engine cannot do, and this is the reason to believe it. Ruled off above rather than boxed, because a box would read as a callout and this is the section's conclusion, not an aside. The lead sentence takes the refusal head's own treatment so the two blocks are visibly one argument. No accent anywhere in it: nothing here is a human release. */ .proof { margin-top: var(--v-block); padding-top: var(--v-block); border-top: 2px solid var(--depth); /* The rule closes the refusal ledger above it, so it runs the ledger's width and not the paragraph's. The prose inside keeps the measure. */ max-width: none; } .proof p { max-width: var(--measure); } .proof .head { display: block; margin-bottom: 0.5rem; font-family: var(--serif); font-weight: 600; font-size: var(--t-refusal); line-height: 1.2; font-kerning: normal; text-rendering: optimizeLegibility; } /* ---------- cards, the ownership split ---------- */ /* A CARD DECLARES ITS OWN INK. It never inherits it. This rule set a near white background and left `color` to the band, which is correct on the light band and produced NEAR WHITE TEXT ON A NEAR WHITE CARD the first time a card was used on the dark ground, in section 02. It shipped that way. contrast-check.py passed throughout, because it audits a list of declared pairs and this was never a declared pair: it was a combination created by putting a light band component on a dark band. The fix is the class, not the section. Any element that brings its own background must bring its own foreground, or it is only correct in the place it was first used. */ .card { background: var(--shell); color: var(--depth); box-shadow: var(--shadow-card); padding: var(--s6); } .card h3 { color: var(--depth); } .card li, .card p { color: var(--steel); } .card h3 { margin-bottom: var(--s4); } .card ul { list-style: none; padding: 0; margin: 0; } .card li + li { margin-top: 0.65rem; border-top: 1px solid var(--hairline); /* decorative separation inside a card */ padding-top: 0.65rem; } /* ---------- dark section, the covenant ---------- The covenant returns to the page's own depth after the light band, so the class only needs to restate the ground for the surface change to read. Panels raise one step. */ /* Same split as .light: the ground gains its leading edge gradient in the band transitions block, and the colour half lives here. */ .dark { background-color: var(--depth); color: var(--daylight); } .dark h2, .dark h3 { color: var(--daylight); } .dark .label { color: var(--tide); } .dark .secondary { color: var(--tide); } .dark a { color: var(--signal); } /* A button inside a dark section is still a button. Without these two lines `.dark a` wins on specificity over `.btn-primary` and paints the label Signal on the Signal fill, which is a 1:1 contrast ratio and an invisible call to action. Found 2026-08-26 by rendering the pricing page, whose close is the site's only primary action inside a `.dark` section, and fixed for the whole button system rather than for that one page. Depth on Signal measures 7.20:1 and Daylight on Depth measures 16.86:1, both already in contrast-report.md. */ .dark .btn-primary { color: var(--depth); } .dark .btn-quiet { color: var(--daylight); } /* THE SAME TRAP EXISTS ON THE LIGHT GROUND, and it was latent in the first cut rather than introduced here: `.light a` is declared after the button block and matches an anchor button, so without these two lines a primary action inside a light section would take the link colour instead of its own. Same specificity, later position, so this wins. Depth on Signal is 7.20:1 and Depth on Limestone is 16.68:1, measured. */ .light .btn-primary { color: var(--depth); } .light .btn-quiet { color: var(--depth); } /* ---------- forms ---------- Forms live in the light band. The held and error state is structure and words, never colour: a 2px boundary in the strongest neutral and a written message with a bold lead. The gate holding is the product working. There is no red, and no amber, because amber would counterfeit the accent. */ .contact-form { max-width: 36rem; margin-top: var(--s6); } .field { margin-bottom: var(--s5); } .field label { display: block; font-family: var(--sans); font-weight: 500; font-size: var(--t-ui); margin-bottom: 0.45rem; } input[type="text"], input[type="email"], textarea { width: 100%; font-family: var(--sans); font-weight: 400; font-size: 1rem; /* 16px minimum for anything acted on */ color: var(--depth); background: var(--shell); border: 1px solid var(--boundary); /* Boundary encloses. Hairline never does. */ border-radius: 0; padding: 0.75rem 0.9rem; /* The caret is a person about to act, so it is the one legal accent inside an input. Signal Deep on Shell is 6.25:1 in the report. */ caret-color: var(--signal-deep); /* An input is a raised surface, and it is the quietest one on the site on purpose. The card shadow on every field would read as a stack of cards rather than as a set of fields, so this is two layers and no ring: the Boundary border above is already this surface's drawn edge, and the ring in the card shadow would double it. */ box-shadow: var(--shadow-input); transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); } input[type="text"]:hover, input[type="email"]:hover, textarea:hover { border-color: var(--steel); } /* THE FIELD UNDER THE CARET TAKES THE LIFTED STEP. A person typing is the one moment this page has a person in it, and the field they are in comes forward off the paper to say so. Shadow only: the focus ring is a separate affordance, it is Signal Deep on this ground, it is drawn by the outline rule near the top of this sheet, and nothing here touches it. No colour changes and no accent is added, so this reads identically to a reader who cannot see the lift. */ input[type="text"]:focus-visible, input[type="email"]:focus-visible, textarea:focus-visible { box-shadow: var(--shadow-card-lifted); } textarea { min-height: 9rem; resize: vertical; } /* The held state: the boundary thickens to 2px and deepens to the strongest structural neutral, and the message below says what is held and why, in words. */ input[aria-invalid="true"], textarea[aria-invalid="true"] { border-width: 2px; border-color: var(--depth); } .field-error { display: none; font-family: var(--sans); font-weight: 600; font-size: var(--t-small); margin-top: 0.45rem; } .field.invalid .field-error { display: block; } /* The send button IS the site's primary action, so it wears the primary action's exact treatment rather than a quieter cousin of it. Depth on Signal is 7.20:1 and Depth on Signal Bright is 10.94:1, both measured. */ button[type="submit"] { font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.005em; color: var(--depth); background: var(--signal); border: 1px solid var(--signal); border-radius: 0; padding: 0.95rem 2.3rem; cursor: pointer; box-shadow: var(--glow-action); transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); } button[type="submit"]:hover { background: var(--signal-bright); border-color: var(--signal-bright); box-shadow: var(--glow-action-hover); } button[type="submit"]:disabled { cursor: default; } /* Form status. One region, written state, never colour alone. The held boundary is 2px in the strongest neutral. */ .form-status { margin-top: var(--s5); max-width: var(--measure); } /* Both statuses are Shell panels on the light ground, so both take the raised step: the elevation model is a model and not a set of exceptions. What separates held from sent stays exactly where the palette put it, in the BOUNDARY and the WORDS. Held is a 2px boundary in the strongest structural neutral, sent is a 1px Boundary, and there is no colour in either, no red, and no amber, because amber would counterfeit the accent. A shadow is light, not an alarm. */ .form-status[data-state="error"] .status-inner { color: var(--depth); border: 2px solid var(--depth); background: var(--shell); box-shadow: var(--shadow-card); padding: 1.1rem 1.3rem; } .form-status[data-state="sent"] .status-inner { color: var(--depth); border: 1px solid var(--boundary); background: var(--shell); box-shadow: var(--shadow-card); padding: 1.1rem 1.3rem; } .form-status .status-title { display: block; font-weight: 600; margin-bottom: 0.25rem; } /* THE RELEASE YOU PERFORM. The one act a visitor can take on this site is pressing send, and that press is precisely the product's own gesture: a person releasing a prepared piece. So a confirmed send is written into the page as a record row in the gate artifact's own grammar, the same square stamp and the same mono line, carrying the reader's own clock and no invented data. It is reachable only through a confirmed 2xx from a real endpoint, which is the accent rule enforcing itself: the accent marks a real human release and nothing else. Every error and held state keeps its 2px Depth treatment and its words, with no colour at all. The stamp is Signal Deep, not Signal. This row sits on Shell, and Signal on Shell measures 2.49:1, a pair this site deliberately does not use. Signal Deep on Shell measures 6.25:1, in the report. */ .form-status .status-record { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.55rem; } .form-status .status-mark { width: 0.6rem; height: 0.6rem; background: var(--signal-deep); flex: none; align-self: center; } .form-status .status-line { color: var(--depth); } /* Honeypot. Hidden from every real reader, including screen readers. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- document pages, privacy and about ---------- Long form prose runs the Limestone ground, carried by the .light class on the document wrapper. The depth frames it above and below. */ /* --v-section at both ends, not s8 at the top. Every other band and every numbered section on this site opens on --v-section, and a document page opening one rung tighter was an ad hoc value with no stated reason: it put the About and Privacy titles two rem higher than the same title would sit anywhere else, which is exactly the kind of drift the named intervals exist to stop. It also gives the light band's own descent ramp, on the one page with no hinge markup above it, clear air to be spent in. */ .doc { padding: var(--v-section) 0 var(--v-section); } /* The document h1 sits below its eyebrow, so it carries the same step the section heads use. It is deliberately not on --t-display: a document page's title is a title, not the loudest object on a surface, and only index and pricing own a display line. */ .doc h1 { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3.25rem); margin-top: var(--v-eyebrow); } .doc .stack-loose { margin-top: var(--s6); } /* The About passage. One block of prose at document rhythm, with the named paragraph interval, now that the page carries no running heads for a rail to hold. */ .doc-body { margin-top: var(--v-head); } .doc-body > * + * { margin-top: var(--v-stack); } .doc h2 { margin-top: var(--s7); margin-bottom: var(--s4); font-size: 1.5rem; font-weight: 600; } .doc-meta { font-family: var(--mono); font-weight: 400; font-size: 0.875rem; color: var(--steel); margin-top: 1.25rem; } /* ---------- footer ---------- The page closes at depth. The rule above it is a tonal step. */ .site-footer { border-top: 1px solid var(--depth-lifted); padding: var(--s7) 0 var(--s7); } .site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; } .footer-entity { display: flex; align-items: center; gap: 0.85rem; font-family: var(--mono); font-weight: 400; font-size: 0.875rem; color: var(--tide); } /* The signature line sits as a third flex item: one balanced row with the entity and the privacy link where the width allows, wrapping to its own line on narrow screens. */ .footer-line { font-family: var(--mono); font-size: 0.8125rem; color: var(--tide); } .site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; } .site-footer a { font-size: 0.9375rem; } /* ---------- motion ---------- Considered, never decorative. Only opacity, transform, and the colour properties ever animate. Body text, the mark, and layout never move. The reduced motion handling uses the fail safe shape: the hidden initial state AND its transition live inside the no-preference query, and the finished frame is the default outside it. A reader with reduced motion set, or a browser that does not evaluate the query, or a page where JavaScript never runs, all see the page complete and at rest. There is nothing to nuke, so no blanket reset exists. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /* THE ACTION LIFTS. One pixel, on hover only, on the transform property only, and only for a reader who has not asked for stillness. The whole colour and light response of the primary action lives OUTSIDE this query, so a reduced motion reader loses the rise and loses nothing else. The resting frame is the default, as everywhere in this sheet. */ .btn-primary, button[type="submit"] { transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), transform var(--t-hover) var(--ease), color var(--t-hover) var(--ease); } .btn-primary:hover, button[type="submit"]:hover { transform: translateY(-1px); } .btn-primary:active, button[type="submit"]:active { transform: none; } /* One time entrance reveals. A 14px rise with fade over 400ms, staggered up to 240ms inside a group, fired once per element. */ html.js .fx { opacity: 0; transform: translateY(14px); } html.js .fx.in { opacity: 1; transform: none; transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease); } /* One reveal per section, plus at most one delayed companion for a split's artifact. Six elements cascading in at up to 400ms of stagger is template behaviour; one quiet rise per section is an edit, so the ladder stops at the first rung. */ html.js .fx.in[data-d="1"] { transition-delay: 80ms; } } /* ---------- print ---------- */ @media print { .site-header, .site-footer, .skip-link { display: none; } .waterline, .waterline-up { display: none; } /* The ledger is a screen instrument and has no business on paper. The seam rules print as drawn lines, in the ink the rest of the page prints in, with the dash offset forced back to the finished frame in case a page is printed mid draw. */ .ledger { display: none; } .seam path { stroke: var(--depth); stroke-dashoffset: 0; } body, .hero, .light, .dark, .statement { background: #FFFFFF; color: var(--depth); } /* Every secondary neutral that was tuned for a dark ground has to carry on white, so the whole page prints as black text on paper. */ .lede, .secondary, .label, .mono, .dark h2, .dark h3, .dark .label, .dark .secondary, .gate-live .bar .mono, .gl-caption, .gl-row .n, .gl-row .state, .gl-row .what, .gl-gate .say, .gl-record .rec-line, .constraints .body p { color: var(--depth); } /* The artifacts print as their finished frames: every row present, the strike struck, the record written. The animation is a screen behaviour and has no business on paper. */ html.js .gl-row, html.js .gl-strike, html.js .gl-cycle, html.js .fx { animation: none; opacity: 1; transform: none; } .gate-live { background: #FFFFFF; box-shadow: none; border: 1px solid var(--depth); } .gl-gate { background: #FFFFFF; } .card, .tier, .sched { color: var(--depth); background: #FFFFFF; box-shadow: none; border: 1px solid var(--hairline); } /* Glow is light, and paper has none. The primary action prints as a drawn square and the register numeral prints as plain ink. */ .btn, .btn-primary, button[type="submit"] { box-shadow: none; background: #FFFFFF; color: var(--depth); border: 1px solid var(--depth); } .label .idx { text-shadow: none; color: var(--depth); } /* The pricing table prints whole rather than clipped to a scroll box. */ .sched { overflow-x: visible; } .sched table { min-width: 0; } } /* ---------- the pricing page ---------- Added 2026-08-26 with site/pricing.html, when the owner decided to publish the figures. The whole surface is built from pairs already measured in contrast-report.md. It introduces no new token and no new pairing, so nothing here needed a new measurement. THE ACCENT RULE, applied hard on this page. A price is information, not a human act, so no figure on this page wears the accent. The tier cards, the milestone table, and the ownership columns are drawn in structural neutrals only. The accent appears exactly where a person acts: the links, the focus ring, and the one primary action at the close. A pricing page is the surface most likely to reach for colour as emphasis, which is precisely why it does not: the figures carry by SCALE, WEIGHT and the strongest measured pair on the site, Depth on Shell at 17.93:1, which is a louder instrument than colour is. */ .p-hero { padding: var(--v-band) 0 var(--v-section); } /* The pricing hero's label sits above a .stack rather than directly above the h1, so the display eyebrow interval is spent here. Same gap, same token, same reason as index.html's hero. */ .p-hero .stack { margin-top: var(--v-eyebrow-display); } /* Optical left alignment, recorded per the direction's rule: this h1 opens on a T, whose stem sits visually right of the measuring edge, so it takes -0.045em. The index h1 opens on an E and takes none. */ .p-hero h1 { text-indent: -0.045em; } /* The three tiers. A grid rather than a row, so the third card wraps under the first two on a narrow screen instead of shrinking below a readable measure. No card is visually promoted: there is no recommended tier, because the tier is determined by the number of lanes the client runs, not by what we would prefer to sell. */ .tiers { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); align-items: start; } .tier { color: var(--depth); background: var(--shell); box-shadow: var(--shadow-card); padding: var(--s6); } .tier .tname { font-family: var(--sans); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); } /* THE FIGURE IS THE LOUDEST THING ON THE PRICING PAGE AFTER THE HEADLINE, and it gets there the way this palette says to get there: scale, weight, and the strongest measured pair the site owns, Depth on Shell at 17.93:1. No accent and no glow, because a price is information and not a human act, and because a glowing figure on a paper card is precisely the cheapness the palette bans. It runs the drawn SemiBold at nearly the section heading's own size, with the leading tightened to match, so the eye lands on the number before it lands on the tier name above it. */ .tier .price { font-family: var(--serif); font-weight: 600; font-size: clamp(2.5rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.02; letter-spacing: -0.015em; color: var(--depth); margin-top: var(--s3); font-variant-numeric: tabular-nums; } /* "from" is a qualifier, not part of the figure. Left inline it wrapped to its own line by accident on the third card and dropped that card's figure out of alignment with the other two, which is the opposite of a price surface reading as considered. Set as a deliberate lead in label above the figure, so all three figures sit at the same size on the same baseline. The visible text is unchanged, only its typography is. */ .tier .price .qual { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.8125rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); margin-bottom: var(--s2); } .tier .price .per { display: block; font-family: var(--sans); font-weight: 400; font-size: 0.9375rem; line-height: 1.4; letter-spacing: 0; color: var(--steel); margin-top: var(--s3); } /* The build fee sits under a drawn line because it is the other invoice, not a footnote to the first. Hairline separates, it never encloses. */ .tier .build { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--hairline); } .tier .b-label { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); } .tier .b-fig { font-family: var(--sans); font-weight: 600; font-size: 1.25rem; color: var(--depth); font-variant-numeric: tabular-nums; } /* The four axes of scale, one line each, separated by the decorative rule rather than by bullets. The list is a specification, so it reads as a register and not as a feature checklist. No ticks: a tick implies a corresponding cross on a cheaper card, and every tier here carries the full engine, the full gate, and the full ownership split. */ .tier .axes { list-style: none; padding: 0; margin: var(--s5) 0 0; } .tier .axes li { padding: 0.65rem 0; border-top: 1px solid var(--hairline); font-size: 0.9375rem; line-height: 1.5; max-width: none; } .tier .axes li:first-child { border-top: 0; padding-top: 0; } .tier .axes li:last-child { padding-bottom: 0; } /* The milestone schedule. A record, so the figures run mono and tabular and the columns align on the digit. It scrolls inside its own box on a narrow screen: the page body never scrolls sideways. */ .sched { overflow-x: auto; background: var(--shell); color: var(--depth); box-shadow: var(--shadow-card); padding: var(--s6); } .sched table { border-collapse: collapse; width: 100%; min-width: 34rem; } .sched th, .sched td { text-align: left; padding: 0.85rem var(--s5) 0.85rem 0; vertical-align: top; border-top: 1px solid var(--hairline); } .sched thead th { border-top: 0; border-bottom: 1px solid var(--depth); /* the header rule encloses the record, so it is the structural neutral */ padding-top: 0; font-family: var(--sans); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); white-space: nowrap; } .sched tbody th { font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; color: var(--depth); white-space: nowrap; } .sched tbody td { font-family: var(--mono); font-weight: 500; font-size: 1rem; color: var(--depth); font-variant-numeric: tabular-nums; } .sched th:last-child, .sched td:last-child { padding-right: 0; } /* The money columns rule up. Right aligned so the figures align on the digit, row heads left, which is the single most inspectable table on the site and the one that most has to read as a record. The one spanning cell is a sentence, not a figure, so it stays left. */ .sched thead th + th, .sched tbody td { text-align: right; padding-left: var(--s5); padding-right: 0; } .sched tbody td[colspan] { text-align: left; } /* Tabular numerals wherever a digit can appear in a column or a register: prices, build figures, table cells, index numerals, record rows and timestamps. Stated once, in one rule, so no figure on this site can be added later without inheriting it. */ .mono, .tier .price, .tier .b-fig, .sched td, .sched th, .label .idx, .constraints li::before, .form-status .status-line { font-variant-numeric: tabular-nums; } /* Available to a screen reader, absent from the page. Used for the schedule table caption, which a sighted reader already has from the section heading above it. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 40rem) { .sched { padding: var(--s5); } } /* ========================================================================== THE EXCITEMENT PASS. Added 2026-08-26 after the owner's read of the shipped site: the colours are right, the page is too plain and static. Everything below spends motion, depth, scale, and rhythm, never a new colour and never a new claim. No token is added and no value changes. Every pair below is already measured in contrast-report.md. The accent discipline holds throughout: in every device here the engine preparing carries no colour, and the accent appears only at the moment a person releases, which is the accent's one meaning. ========================================================================== */ /* ---------- material depth in the ground ---------- The Depth ground read as flat. These washes are a single restrained source of blue light above the first screen, built from low alpha layers of the palette's own Signal and Depth Lifted over the same Depth ground, decaying to nothing well inside the first viewport. It is a vignette, not a gradient wash: it has a centre, it has an edge, and below the fold the ground is flat Depth again. MEASURED, NOT ASSUMED. At the point where both layers are at full strength the composite is rgb(18, 38, 73), whose relative luminance is 0.0197 against Depth Lifted's 0.0210, so the brightest pixel of the wash is still DARKER than Depth Lifted, and every text colour on these surfaces is measured against Depth Lifted at full strength in contrast-report.md. Tide over the brightest point of the wash measures 6.90:1 and Signal measures 5.74:1, both above the floor with room. Decorative, static, CSS only. */ .hero, .p-hero { background: radial-gradient(105% 78% at 72% -16%, rgba(77, 163, 255, 0.10), rgba(77, 163, 255, 0) 58%), radial-gradient(120% 88% at 50% -30%, rgba(20, 38, 79, 0.35), rgba(20, 38, 79, 0) 66%); } /* ========================================================================== THE BAND TRANSITIONS. Rebuilt in the depth and flow pass, 2026-08-29, on the owner's read: the page reads as flat bands of colour stacked on each other, and it should carry a reader from one to the next. WHAT WAS WRONG, stated plainly, because the first cut was not lazy and the diagnosis matters. The waterline already crossed the tonal ladder in order, which is the right idea. It crossed it in TWENTY ONE PIXELS, using hard stops, which gave each of four steps between four and nine pixels. At that size the eye does not integrate a ramp; it resolves four stripes, and four stripes between two flat slabs is a decorated cut, not a transition. Worse, the strip landed on flat Depth on one side and flat Limestone on the other, so the instant the strip ended the ground was constant again and every hint of travel stopped. THE FIX IS THREE PARTS, and it is one continuous ramp made of them. 1. THE HINGE GROWS AND SOFTENS. The strip becomes --v-hinge, three rem at wide and two at narrow, and its stops interpolate rather than butting. Six ladder steps across 48 px is eight pixels a step, which is the size at which a step stops being a stripe. The ladder is still crossed IN ORDER and still thins toward the light, so the device the identity named survives; it is given the room to work. 2. THE HINGE ENDS ON THE INCOMING BAND'S LIFTED VALUE, NOT ITS FLAT ONE. The descending hinge lands on Shell and the ascending hinge lands on Depth Raised, one step above the ground each band settles to. That is the join. Without it the hinge would end at Depth, the band below would begin at Depth Raised, and the reader would meet a dip and then a bump where the two met. 3. THE INCOMING BAND CATCHES THE LIGHT AND DECAYS TO ITS GROUND. Every band is lightest at its own top edge and falls to flat over --v-lift. That is the same physics as the lit top edge on every raised surface in the elevation model above, applied at band scale: light comes from above, and a surface catches it where it faces the source. The footer's Depth Lifted top border has drawn exactly this edge since the first cut. Together the three parts are ONE gradient that starts in the outgoing band's ground, crosses the ladder through the hinge, and decays into the incoming band's ground over six rem. A reader does not meet a boundary. A reader is carried across one. NO NEW COLOUR, NO NEW PAIR, AND HERE IS THE PROOF RATHER THAN THE CLAIM. Every stop below is a named ladder token. The dark lift's brightest value is exactly DEPTH RAISED and the light lift's brightest is exactly SHELL, which is the cap the elevation model states, so the worst ground any text on this site sits over is a ground already in contrast-report.md: Daylight, Tide and Signal on Depth Raised at 15.09:1, 7.75:1 and 6.44:1, and Depth, Steel and Signal Deep on Shell at 17.93:1, 6.63:1 and 6.25:1. No pair moves and none is added. Tideline, the quiet button's boundary, is the one token that would have failed a Depth Lifted ceiling at 2.77:1, and it is the reason the ceiling is Depth Raised, where it measures 3.17:1. Measured, not assumed. All of it is decorative and aria hidden or painted on a container, there is no accent anywhere in it, and there is no glow: glow is spent on the primary action, the mark's core and the register numerals, and a band boundary is none of those three. ========================================================================== */ /* THE STOPS ARE NOT EVENLY SPACED, AND THE SPACING IS THE WHOLE DESIGN. The palette's own words for this device are the tonal ladder crossed in order in strips THINNING TOWARD THE LIGHT, and the first attempt at this pass gave each of six steps an equal share of the hinge, which is not what that sentence says and not what it produces. Rendered at 1440 it was a bright blue bar lying between two flat slabs. THE REASON IS CHROMA, NOT LIGHTNESS. Every stop is monotonic in lightness, so the ramp was correct as a ramp. But Depth and Limestone are both LOW chroma and Tideline and Tide are both HIGH chroma, so a ramp that gives the blue steps a third of its height takes a large detour into saturation exactly in the middle, and a saturated band between two desaturated ones reads as emitted light. That is the cheapness the palette bans, and it is close enough to a glow that it would have been a fourth glow on a page permitted three. So the near black steps take four fifths of the hinge and the bright crossing takes the last fifth: thirty two pixels of Depth to Depth Raised, eighteen of Depth Raised to Depth Lifted, then eight, four and two through Tideline, Tide and Shell. The blue is a LINE where the ladder breaks the surface, which is what a waterline is, rather than a band. Thinning toward the light, as written. The last stop is Shell rather than Limestone because the light band below opens on Shell, so the two gradients are continuous at the join. */ .waterline { height: var(--v-hinge); background-color: var(--shell); background-image: linear-gradient(180deg, var(--depth) 0%, var(--depth-raised) 50%, var(--depth-lifted) 78%, var(--tideline) 90%, var(--tide) 96%, var(--shell) 100%); } /* The ascending hinge. Light above, dark below. Same spacing discipline and the same reason: the bright crossing is a line at the top, three pixels of Tide and five of Tideline, and everything after it is the long settle into the deep. It is not a mirror image of the descent and should not be. Submerging is the longer event of the two, and the falloff belongs to the ground being ENTERED, so the dark half of this ramp gets three quarters of the hinge here and half of it there. The last stop is Depth Raised, which is exactly where every dark band below opens, and that band then decays Depth Raised to Depth across --v-lift. So the descent does not end at this element's last pixel: it runs another six rem into the band, and the two are one gradient. */ .waterline-up { height: var(--v-hinge); background-color: var(--depth-raised); background-image: linear-gradient(180deg, var(--limestone) 0%, var(--tide) 5%, var(--tideline) 13%, var(--depth-lifted) 30%, var(--depth-raised) 100%); } /* ---------- the light a band catches on its own top edge ---------- Painted as a background image over the band's own background colour, sized to --v-lift and never repeated, so the band is one step lighter at its top edge and flat everywhere else. background-color carries the ground, which means the print block's `background: #FFFFFF` shorthand still clears both in one line and nothing here reaches paper. */ .dark, .statement, .site-footer { background-color: var(--depth); background-image: linear-gradient(180deg, var(--depth-raised), rgba(13, 27, 61, 0)); background-size: 100% var(--v-lift); background-repeat: no-repeat; } /* THE LIGHT BAND, AND ITS DEFAULT IS THE UNHINGED CASE ON PURPOSE. Three of the four pages put a .waterline element above their light band and a .waterline-up below it. privacy.html does neither: its .doc.light meets the Depth header directly at the top and the Depth footer directly at the bottom, with no hinge markup at all. That is a gap in the markup, this pass may not touch markup, so the band draws whichever end of its own transition nothing else drew, and yields that job to a hinge element wherever one exists. Each drawn end is the same two part ramp a hinged band gets, painted inside the band instead of above or below it, and the document's own --v-section opening and closing padding means both are spent entirely in air with no copy over them. THE SELECTORS ARE PLAIN ADJACENCY AND :last-child, NOT :has(). That is deliberate. The first cut of this rule reached for `.light + .site-footer::before` to draw the closing ramp, and IT NEVER MATCHED ONCE: the light band lives inside
and the footer is main's sibling, not the band's, so the two are never adjacent on any page. It was found by sampling the rendered pixel column down privacy.html rather than by reading the rule, which is the only way a selector that matches nothing ever gets found. What replaced it asks a question the band can answer about ITSELF, is there anything after me inside my own parent, which needs no :has and cannot be wrong about the document it is in. All four combinations are stated rather than left to fall through, so a fifth page in any shape gets a transition at both ends without anyone having to notice. */ /* Neither end hinged. The band carries the descent into itself, catches the light, and closes with the ascent at its own last pixel. */ .light { background-color: var(--limestone); background-image: linear-gradient(180deg, var(--depth) 0%, var(--depth-raised) 50%, var(--depth-lifted) 78%, var(--tideline) 90%, var(--tide) 96%, var(--shell) 100%), linear-gradient(180deg, var(--shell), rgba(247, 249, 253, 0)); background-size: 100% var(--v-hinge), 100% var(--v-lift); background-position: 0 0, 0 var(--v-hinge); background-repeat: no-repeat, no-repeat; } /* Hinged above. The .waterline element already carried the descent and already ended on Shell, so this band only catches the light. */ .waterline + .light { background-image: linear-gradient(180deg, var(--shell), rgba(247, 249, 253, 0)); background-size: 100% var(--v-lift); background-position: 0 0; } /* Nothing follows it inside its parent, so nothing else will draw its close: it submerges on its own last --v-hinge, ending on Depth Raised, which is exactly where the footer's own leading edge picks the ramp up. Written twice, once for each state of the band's top edge, because a background-image list cannot be appended to. */ .light:last-child { background-image: linear-gradient(180deg, var(--depth) 0%, var(--depth-raised) 50%, var(--depth-lifted) 78%, var(--tideline) 90%, var(--tide) 96%, var(--shell) 100%), linear-gradient(180deg, var(--shell), rgba(247, 249, 253, 0)), linear-gradient(180deg, var(--limestone) 0%, var(--tide) 5%, var(--tideline) 13%, var(--depth-lifted) 30%, var(--depth-raised) 100%); background-size: 100% var(--v-hinge), 100% var(--v-lift), 100% var(--v-hinge); background-position: 0 0, 0 var(--v-hinge), 0 100%; background-repeat: no-repeat, no-repeat, no-repeat; } .waterline + .light:last-child { background-image: linear-gradient(180deg, var(--shell), rgba(247, 249, 253, 0)), linear-gradient(180deg, var(--limestone) 0%, var(--tide) 5%, var(--tideline) 13%, var(--depth-lifted) 30%, var(--depth-raised) 100%); background-size: 100% var(--v-lift), 100% var(--v-hinge); background-position: 0 0, 0 100%; } /* ---------- the hero grid ---------- The site's one two column proportion, and now its only split. Tiers two and three. The lede and the doors hold the left, the gate, drawn live, holds the right, top aligned rather than centred so the artifact's chrome bar sits on the same optical line as the lede's cap height. Same 7:5 proportion as every other split on the site: there is no third proportion. */ .hero-grid { margin-top: var(--v-head); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: start; } @media (max-width: 64rem) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .gate-live { max-width: 30rem; } } /* ---------- the gate, drawn live ---------- The hero artifact. The literal product, watchable: the engine prepares four kinds of work, the work holds at the gate, and one release lands in the record with the strike. The queue and the hold carry no colour at all, because the engine preparing never wears the accent. The strike and the released stamp are the only accent in the artifact, and they are the accent's one sanctioned meaning. FAIL SAFE SHAPE, same as the .fx system: the finished frame, every row present, the strike struck, the record written, is the default state in this stylesheet. The keyframes that empty and replay it live entirely inside the no-preference media query below and only run once the script has put the js class on the root. Reduced motion readers and script blocked readers both see the complete finished artifact. */ .gate-live { background: var(--depth-raised); color: var(--daylight); box-shadow: var(--shadow-raised-dark); overflow: hidden; } .gate-live .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--depth-lifted); } .gate-live .bar .mono { font-size: 0.8125rem; color: var(--tide); } .gl-caption { font-family: var(--mono); font-size: 0.8125rem; color: var(--tide); padding: 0.9rem 1.25rem 0.35rem; } .gl-row { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.5rem 1.25rem; font-size: 0.9375rem; } .gl-row .n { font-size: 0.8125rem; font-weight: 500; color: var(--tide); } .gl-row .what { font-family: var(--sans); font-weight: 600; color: var(--daylight); } .gl-row .state { margin-left: auto; font-size: 0.8125rem; color: var(--tide); } /* The gate itself, the same grammar as the model card's gate line: an inset strip of the page's own depth, rules to either side, the words in the register mono. The strike element sits in the middle and is empty while the gate holds. */ /* THE MODULE HATCH, added in the instrument pass. The identity is constructed on 11 and 10 unit modules, and this is the one place on the site where that module is made visible: vertical hairlines on the 11 module, inside the gate strip and nowhere else. Depth Raised on Depth is a tonal step of the same water, decorative, far below the mono line that sits over it, so it adds no pair to the report. At reading distance the effect is a faint machined texture, the module counted out, visible only to a reader who leans in, which is the correct audience. A page wide grid texture would be exactly the template tell this design bans. */ /* THE GATE IS THE ONE SURFACE ON THE SITE THAT GOES DOWN, and the elevation model says so for a reason that is not styling: this strip is literally the slot the work sits in while it waits, so it is cut INTO the card rather than sitting on it. It was already a Depth strip inside a Depth Raised card, which is the right value and, on its own, a nominal step; the recess shadow is what makes a reader see a well instead of a darker rectangle. Shadowed at the near lip and lit at the far one, which is the exact inverse of every raised surface here, from the same light above. Decorative, no contrast duty, no accent: the accent in this artifact is the strike and the stamps and nothing else. */ .gl-gate { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.25rem; margin-top: 0.45rem; border-top: 1px solid var(--depth-lifted); border-bottom: 1px solid var(--depth-lifted); background-color: var(--depth); background-image: repeating-linear-gradient(90deg, var(--depth-raised) 0 1px, transparent 1px calc(100% / 11)); box-shadow: var(--shadow-recess-dark); } .gl-gate .side { flex: 1; height: 1px; background: var(--tide); } .gl-gate .say { font-family: var(--mono); font-size: 0.8125rem; color: var(--tide); white-space: nowrap; } /* The strike. Signal, and the one accent in the queue half of the artifact. Signal on Depth measures 7.20:1, in the report. */ .gl-strike { width: 1.4rem; height: 0.5rem; background: var(--signal); flex: none; } .gl-record { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.45rem 1.25rem; } /* The record accrues. The first row is seeded in the markup and never animates, so the region under "the record" is never an empty labelled box while the engine half of the cycle runs: the median visitor, who does not watch a hero for the length of a cycle, still sees a record with a release in it. The cycle lands a second row beneath the seeded one, which is the accrual the model section describes. Only the last row carries the card's closing padding. */ .gl-record:last-of-type { padding-bottom: 1.1rem; } /* The released stamp on the record row. Signal on Depth Raised measures 6.44:1 in the report, above the 3:1 non text floor. */ .gl-record .gl-mark { width: 0.6rem; height: 0.6rem; background: var(--signal); flex: none; align-self: center; } .gl-record .rec-line { font-size: 0.8125rem; color: var(--daylight); } /* The replay. One 12 second cycle: the four rows arrive one by one over the first 2.9 seconds, the gate holds for 2.4 seconds, the strike lands at 5.3 seconds, the cycle's record row follows at 6 seconds, the frame rests to 11 seconds, and the cycle turns over. Twelve, not nine: at nine the hold ran 1.8 seconds and read as a stall rather than as the product deliberately holding, and the strike still lands inside the first five seconds of watching, which a first look actually reaches. The percentages are unchanged from the nine second cut because they map cleanly onto the new absolute timings. Linear percentages, the shared ease on each segment. Only opacity and transform animate. The seeded record row carries no animation at all: it is the rest state of the record, present from the first frame, so the cycle only ever adds to a record that already holds a release. */ @media (prefers-reduced-motion: no-preference) { html.js .gl-row, html.js .gl-strike, html.js .gl-cycle { animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: var(--ease); } /* The rows are the third through sixth children of the figure, after the bar and the queue caption. Position selectors, stated so the markup and this sheet stay honest with each other. */ html.js .gl-row:nth-child(3) { animation-name: gl-row-1; } html.js .gl-row:nth-child(4) { animation-name: gl-row-2; } html.js .gl-row:nth-child(5) { animation-name: gl-row-3; } html.js .gl-row:nth-child(6) { animation-name: gl-row-4; } html.js .gl-strike { animation-name: gl-strike; } html.js .gl-cycle { animation-name: gl-record; } @keyframes gl-row-1 { 0%, 2% { opacity: 0; transform: translateY(6px); } 6%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } } @keyframes gl-row-2 { 0%, 8% { opacity: 0; transform: translateY(6px); } 12%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } } @keyframes gl-row-3 { 0%, 14% { opacity: 0; transform: translateY(6px); } 18%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } } @keyframes gl-row-4 { 0%, 20% { opacity: 0; transform: translateY(6px); } 24%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } } /* The hold is the middle: rows in by 24%, nothing moves until the strike at 44%. The pause is the product working. The strike LANDS, it does not fade in. It arrives oversize at 1.12 and settles to 1 across a single percent of the cycle, which is 120ms, with the opacity crossing in the same window. A stamp comes down. It does not condense. */ @keyframes gl-strike { 0%, 44% { opacity: 0; transform: scale(1.12); } 45%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } } @keyframes gl-record { 0%, 50% { opacity: 0; transform: translateY(6px); } 55%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } } /* The confirmed send stamps with the same 120ms settle as the strike. Transform only, no opacity, so the stamped state is complete on its own and this is decoration on top of a finished frame. */ html.js .form-status[data-state="sent"] .status-mark { animation: gl-stamp 120ms var(--ease) 1; } @keyframes gl-stamp { from { transform: scale(1.12); } to { transform: none; } } } /* ---------- the statement band ---------- The six word line was a mono footnote. Here it is the loudest type on the site, the signature sentence at display scale on the Depth ground between the light band and the covenant, so the sentence itself is the transition back into the deep. The full stop is the release stamp, the same square the record rows carry, and the sentence it closes is the human release, so the accent is spent where the identity already spends it. Signal on Depth measures 7.20:1, in the report. */ .statement { /* THE SOURCE OF LIGHT IS STILL THE HERO AND ONLY THE HERO. The rule this comment used to state, that light enters the page exactly once, survives intact and is worth restating: the hero's wash is a VIGNETTE, a source, tinted with the accent, with a centre and an edge, and there is exactly one of them on the site because three would be decoration and one is physics. What this band now catches at its top edge is not a second source. It is the same thing every raised surface in the elevation model catches: the top face of an object turned toward a light that is above it. It carries no hue and no accent, it is one tonal step of the band's own water, and it is capped at Depth Raised. The band is still flat Depth everywhere a word sits on it. The ground and its leading edge are set in the band transitions block. */ color: var(--daylight); padding: var(--v-band) 0; } .statement .label { margin-bottom: var(--s5); } /* text-wrap: balance is deliberately NOT applied here: balance would fight the authored two line shape. The optical left indent is recorded per the direction's rule: this line opens on a T, whose stem sits visually right of the measuring edge, so it takes -0.045em. The page h1 opens on an E and takes none. */ .statement-line { font-family: var(--serif); font-weight: 600; font-size: var(--t-statement); line-height: 0.99; letter-spacing: -0.014em; /* The break is authored in the markup, after the comma, so the two clauses land as two lines. No ch cap here: a cap under the longer clause would push a third wrap into the authored break. */ max-width: none; text-indent: -0.045em; font-kerning: normal; text-rendering: optimizeLegibility; hanging-punctuation: first allow-end; } /* The stop is sized against the wordmark's own, not guessed. The identity's judged stop is 0.18 of cap height, Charis caps sit near 0.7em, and 0.18 times 0.7 is 0.126. Baseline aligned, no vertical translate. */ .statement-line .stop { display: inline-block; width: 0.125em; height: 0.125em; background: var(--signal); margin-left: 0.1em; } /* ========================================================================== THE WIDTH PASS. Added 2026-08-26, the second half of the excitement work. Below the hero the page had collapsed back into a single left column: content stopped around 900px at 1440 and the whole right third of the viewport was empty ground for the rest of the page, which is most of what read as plain. The fix is not wider prose. The 68ch measure is correct and does not move. The fix is composition: the PAGE uses the width while the paragraphs keep their measure. Four devices, no new token, no new pair. Every colour below is already measured in contrast-report.md. 1. The rail. Each numbered section moves its label and index numeral out of the content stack and into a left margin column, the standard editorial device, so the numbered document reads down a rail on the left while the content sits to its right. The label is sticky inside its section, so a long section keeps its number in view, which is the register grammar the site already speaks. 2. The limits ledger runs two up at wide widths. Six short refusals in one long column was a scroll, not a scan. 3. The prose only sections carry an anchor in the split grid's right column: a pull line in the destination, the one queue register in the fit section. Both are drawn from sentences already on the page, wearing surfaces already measured. 4. The ownership split stretches both cards to one height, above, at the .two-col rule itself. ========================================================================== */ /* ---------- the rail ---------- Markup shape: .wrap.rail > .rail-label + .rail-body. Below the rail breakpoint the label simply stacks above the section head, which is exactly the geometry the page had before the rail existed, so narrow screens are untouched by this device. */ .rail-label { display: block; } /* The ornament above the rail label follows the two precedents already in this sheet: hero-line::before draws Tideline on the dark ground, covenant-line::before draws Depth on the light ground. An ornament is never the accent. */ .rail-label::before { content: ""; display: block; width: 2rem; height: 2px; background: var(--tideline); margin-bottom: var(--s3); } .light .rail-label::before { background: var(--depth); } @media (min-width: 64rem) { .rail { display: grid; /* 11.5rem, one step wider than the first cut, to seat the register numeral now that it runs at instrument scale. This is the only grid dimension the instrument pass touches. */ grid-template-columns: 11.5rem minmax(0, 1fr); column-gap: var(--s7); /* start, not stretch: a stretched grid item cannot be sticky */ align-items: start; } .rail > .rail-label { grid-column: 1; position: sticky; /* Below the sticky header, one spacing step of air */ top: 5.5rem; /* Optically seats the small label against the cap height of the display h2 across the gutter */ padding-top: 0.4rem; } .rail > .rail-body { grid-column: 2; } /* The s4 gap under the label came from .section-head h2's top margin when the label lived inside the head. In the rail the label sits beside the head, so the head starts flush. */ .rail .section-head h2 { margin-top: 0; } } /* ---------- the limits ledger, two up ---------- Six refusals, three rows of two, at the width where two 68ch-capped bodies genuinely fit. The per item top borders keep ruling each row. The container takes the closing rule, because with two columns there is no single last item to carry it. */ @media (min-width: 64rem) { .constraints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* s7, not s6: each row now carries an s3 inset on both sides, so two facing rows spend 1.5rem of the gap on their own raised surfaces. At s6 that left half a rem of clear ground between two cards under the pointer. At s7 it leaves a rem and a half. */ column-gap: var(--s7); border-bottom: 1px solid var(--hairline); } .constraints li:last-child { border-bottom: 0; } } /* ========================================================================== THE INSTRUMENT PASS. Added 2026-08-27 against DESIGN-DIRECTION-V2 after the owner read the shipped site and asked for a more futuristic, custom, interactive register that never reads as generated. The organising idea is that the site is a working instrument that records its own reading: the page behaves the way the product behaves, because the engine's work arrives as you watch, the gate holds it, and a record accrues. Futuristic here does not mean neon, chrome, or sci fi. It means what a flight instrument or an assay report means: precise, measured, alive, telling you what it is doing while it does it. Every device below is built out of this brand's own material, which is what makes it custom by construction rather than by decoration. No new token. No new colour pair. No new claim. Nothing loops except the gate that already did, and nothing moves while the reader is still, which is the difference between an instrument and a screensaver. ========================================================================== */ /* ---------- the two chapters ---------- A hybrid scroll architecture, adopted over full viewport chapters and over the plain continuous document. The document form survives, the reading rhythm survives, and the page takes theatre exactly twice: at its opening and at its thesis. No scroll snap and no scroll hijacking anywhere; scroll snap on a prose document is a template tell and an accessibility cost. Below the rail breakpoint both minimums are dropped, because a phone hero already fills the screen and a forced minimum would push the lede off the first screen. */ @media (min-width: 64rem) { .hero { min-height: 88vh; /* fallback for engines without the small viewport unit */ min-height: 88svh; } .statement { min-height: 55vh; min-height: 55svh; display: flex; flex-direction: column; justify-content: center; } } /* ---------- the ledger ---------- The site's signature interactive element and the one thing on this page no template ships: a record that belongs to the person it describes. It accrues one row per numbered section the reader actually reaches, in the record's exact grammar and on the reader's own clock, and takes a final accented row only on a confirmed send. Five rows of neutral reading, one row of human release, which is the accent rule enforcing itself. FAIL SAFE SHAPE. display: none at rest and shown only under html.js, so a script blocked reader never meets an empty labelled instrument, and display is not opacity so the zero opacity rule is untouched. THE BREAKPOINT IS 86rem, NOT THE 64rem THE DIRECTION NAMED, AND IT IS MEASURED. The direction states an absolute: this instrument must never overlap the reading column, and its own verification list orders the builder to re check the 20rem box at the rail breakpoint exactly. That check was run, at 1024 by 768, sweeping the whole scroll range in 100px steps: 109 real intersections between the fixed box and live copy, the hero lede and both hero actions among them. The arithmetic behind the fix, so the next lane does not re derive it. The reading column starts at the wrap's left edge plus the 11.5rem rail plus the 3rem column gap, and the wrap's left edge is 1.5rem until the viewport passes the 72rem page width, after which it grows by half the surplus. A 20rem box sitting at the 1.5rem gutter needs 1.5 + 20 + 1.5 clear rem before the reading column, which resolves to a viewport of 1376px, 86rem. Below that the instrument does not exist, for exactly the reason the direction gives for hiding it on a phone: it would cover copy, and the gate artifact already carries the demonstration. Narrowing the box instead was rejected: at 1024 only 13rem is clear, which wraps the record grammar mid line, and a record that wraps is worse than none. THE SWEEP THEN FOUND TWO MORE THINGS, BOTH FIXED HERE. First, at 86rem the rail sections clear the box but the HERO does not, because hero copy starts at the wrap edge rather than past the rail, so the sweep still returned 47 intersections at 1376 and at 1440, all of them hero. The fix is not geometry, it is honesty: an instrument holding no records has nothing to show, so it does not appear until its first row lands, which is section 01, by which point the hero has left the screen. That is why the rule below is keyed on .recording and the script adds that class with the first row. Second, a fixed opaque box standing over a button intercepts the click meant for it. This element is aria hidden and offers no action of its own, so it takes pointer-events: none and the page underneath stays entirely operable. Third, the retreat state was held as a counter incremented per observer entry, which is wrong in a way that looks right, because one callback carries an entry for every target; it is a membership list now, in index.html. WHAT THE FINISHED SWEEP MEASURES, stated rather than rounded off. At 1920 and above: zero intersections with anything, at every scroll position. At 86rem to 112rem, one thing still transits behind the box, the rail label, for the few hundred pixels between a section's top entering the viewport and that label sticking to the top of the screen. That is a decorative register caption in the page's left margin, it is not reading copy, it is not an interactive target, and it is restored sticky at the top of the screen for the entire time its section is actually read. It is a stated trade, not an unknown. Clearing it would mean a 112rem breakpoint, which would take the site's signature element away from the 1440 viewport the direction itself designs against, and that is a worse page. Reading copy, headings, actions, and the form are clear at every width the instrument appears at. Every colour is already in contrast-report.md: Tide on Depth Raised 7.75:1, Daylight on Depth Raised 15.09:1, Signal on Depth Raised 6.44:1. The row mark is Tideline, decorative non text, because reading is not a release and the engine's neutrals carry the register. */ .ledger { display: none; } @media (min-width: 86rem) { html.js .ledger.recording { display: block; position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 15; /* under the header, which stands at 20 */ /* Ambient, never interactive. It is aria hidden and offers no action, so it must never eat a click meant for the page beneath it. */ pointer-events: none; max-width: 20rem; background: var(--depth-raised); color: var(--daylight); /* THE ONE ELEMENT ON THE SITE THAT TAKES THE LIFTED STEP, and it earns it by being the only one that genuinely floats: it is position fixed, so it is not in the page, it is over it. A brighter top edge and a wider, deeper cast than the gate card, which is the same instrument sitting IN the page and takes the raised step. The two shadows are what tell a reader which of them is where. */ box-shadow: var(--shadow-lifted-dark); } } /* Same chrome grammar as the gate artifact's bar, the same padding and the same rule, because the two are one instrument at two magnifications. */ .ledger-bar { padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--depth-lifted); } .ledger-bar .mono { color: var(--tide); } .ledger-row { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.45rem 1.25rem; } .ledger-mark { width: 0.6rem; height: 0.6rem; background: var(--tideline); flex: none; align-self: center; } /* The only accent this instrument ever carries. */ .ledger-row.released .ledger-mark { background: var(--signal); } .ledger-line { color: var(--daylight); } /* The honesty line, and it is load bearing rather than decoration. A site whose privacy policy states it runs no analytics cannot show a record of the reader's own scrolling without saying, on the instrument's face, that the record is DOM only, never persisted and never transmitted. The script that fills this thing contains no storage call of any kind. */ .ledger-note { padding: 0.9rem 1.25rem 1.1rem; color: var(--tide); max-width: none; } /* RETREAT, the reduced motion and default path: an instant hide, no fade. The fading version lives inside the no-preference query below, which is where its opacity belongs. */ html.js .ledger.gone { visibility: hidden; } /* ========================================================================== MOTION, THE INSTRUMENT PASS ADDITIONS. Every device keeps the fail safe shape this sheet has used from the first cut: the FINISHED FRAME is the stylesheet default, and the hidden state and its transition live only inside this query and only under html.js. A reduced motion reader, a script blocked reader, and a print render all see every device complete and at rest. Only opacity, transform, and one stroke-dashoffset animate. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* 1. THE REFUSAL CASCADE. The stagger ladder returns inside .constraints and nowhere else on the site: six short refusals arriving one after another read as a ledger being written, which is the section's own subject. 10px rather than the section rise's 14px, because a row moves less than a chapter. data-d 0 through 5, 60ms steps, 300ms of total stagger. These selectors are deliberately more specific than the global data-d rule above so the 80ms companion delay cannot leak in. */ html.js .constraints > li.fx { transform: translateY(10px); } html.js .constraints > li.fx.in[data-d="0"] { transition-delay: 0ms; } html.js .constraints > li.fx.in[data-d="1"] { transition-delay: 60ms; } html.js .constraints > li.fx.in[data-d="2"] { transition-delay: 120ms; } html.js .constraints > li.fx.in[data-d="3"] { transition-delay: 180ms; } html.js .constraints > li.fx.in[data-d="4"] { transition-delay: 240ms; } html.js .constraints > li.fx.in[data-d="5"] { transition-delay: 300ms; } /* 2. THE SEAM RULE DRAWS ITSELF, left to right, once, on arrival. Stroke only: no opacity and no transform, so the resting frame is byte for byte the drawn line the sheet already declares. */ html.js .seam path { stroke-dashoffset: 1608; } html.js .seam.in path { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--ease); } /* 3. THE STATEMENT STOP LANDS. The same 120ms settle the gate's strike uses, on the same keyframe, transform only, so the resting frame is identical and complete and this is decoration on top of a finished one. A stamp comes down. It does not condense. */ html.js .statement.in .statement-line .stop { animation: gl-stamp 120ms var(--ease) 1; } /* 4. THE LEDGER ROW LANDS. A 6px rise over 160ms on a plain DOM append. Under reduced motion the row still appears, because the appearance of content is not motion; it simply appears with no rise and no transition, which is what the absence of this block gives it. */ html.js .ledger-row { opacity: 0; transform: translateY(6px); } html.js .ledger-row.in { opacity: 1; transform: none; transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); } /* The sent row's mark takes the stamp settle, so the one accent event in the instrument arrives the way every other release on this site does. */ html.js .ledger-row.released.in .ledger-mark { animation: gl-stamp 120ms var(--ease) 1; } /* 5. THE LEDGER RETREATS rather than sitting over the close. visibility is delayed to the end of the fade on the way out and restored at once on the way back, so the instrument is never focusable or hit testable while it is invisible. */ html.js .ledger { transition: opacity var(--t-hover) var(--ease), visibility 0s linear 0s; } html.js .ledger.gone { opacity: 0; visibility: hidden; transition: opacity var(--t-hover) var(--ease), visibility 0s linear var(--t-hover); } } /* ========================================================================== PRINT, THE DEPTH AND FLOW PASS ADDITIONS. This block is at the FOOT of the sheet and that position is the whole point of it, not tidiness. THE DEFECT IT FIXES, found by reading the cascade rather than the page. The main print block sits at roughly the sheet's midpoint, and a media query adds no specificity. Every ground rule this pass wrote, the band lifts on .dark, .statement and .site-footer and the two gradient layers on .light, is declared AFTER that block, so each one won the cascade in print too and would have put a dark blue ramp across the top of a printed page and a Limestone ground under printed body copy. The original `background: #FFFFFF` shorthand was correct and was simply being outranked by position. Anything this pass adds below the midpoint is therefore returned to paper here, at a point nothing can outrank. Paper has no light source, so it has no elevation: every shadow, lift, hinge and well this pass added resolves to nothing, and the page prints as ink on white exactly as it did before. ========================================================================== */ @media print { /* The grounds, restated after the rules that outranked them. .light is listed twice at two specificities on purpose: the band's own rule is (0,1,0) but `.waterline + .light` is (0,2,0), and a reset that only matches the weaker of the two leaves the descent gradient painting on paper. Matched, not assumed: this was found by printing the page to PDF and looking at it. */ .light, .dark, .statement, .site-footer, .waterline + .light, .light:last-child, .waterline + .light:last-child { background-color: #FFFFFF; background-image: none; color: var(--depth); } /* THE HERO WASH PRINTED, AND IT HAD BEEN PRINTING SINCE THE EXCITEMENT PASS. This is a pre existing defect this pass found rather than caused, and it is fixed here because this is now the block that can reach it. The main print block resets `.hero`, but the two radial gradients are declared several hundred lines BELOW it and outranked it by position, so every printed copy of the home page carried a grey blue wash across its top third and the pricing page carried one too, `.p-hero` never having been in the reset list at all. Seen in a real Page.printToPDF render; an emulated print media query is not proof, and in this case getComputedStyle under emulation actively disagreed with the PDF. */ .hero, .p-hero { background-color: #FFFFFF; background-image: none; } /* Every surface the elevation model raises, recesses or lifts, plus the three that the main block already tried to flatten and could not reach. The gate card, its module hatch, the tiers and the schedule are all declared below the main print block and outranked it exactly the way the hero wash did, so the gate artifact printed as a dark blue panel on white paper. Same defect, same cause, same fix. */ .hero, .p-hero, .gate-live, .gl-gate, .ledger, .card, .tier, .sched, .form-status .status-inner, input[type="text"], input[type="email"], textarea { box-shadow: none; } .gate-live, .gl-gate, .card, .tier, .sched { background-color: #FFFFFF; background-image: none; } /* WHITENING A DARK SURFACE WITHOUT RESETTING ITS INK PRINTS A BLANK RECTANGLE. The rule above took .gate-live to white paper while it kept `color: var(--daylight)` from its screen rule, which is 15.09:1 on Depth Raised and 1.12:1 on white. The whole gate artifact, the thing the page is built around, printed as an empty box. contrast-check.py cannot see this, because it reads the screen cascade and a print override is invisible to it, so the only way this surfaces is rendering an actual PDF and looking at it. Ink is reset here for the container AND its descendants, because the children set their own light colours and would not inherit. */ /* !important IS DELIBERATE AND IS SCOPED TO PRINT. The first attempt at this fix used `.gate-live, .gate-live *`, which is (0,1,0), and it was NOT enough: `.gl-row .what`, `.gl-row .n`, `.gl-record .rec-line` and `.gate-live .bar .mono` are (0,2,0) and (0,3,0) and all four kept their light ink on white paper. Enumerating them would fix today and break the next time a descendant rule is added, which is the same failure one layer along. Ink on paper is not a place for a specificity race, so this wins outright and stays won. */ .gate-live, .gate-live * { color: var(--depth) !important; } /* The muted register, kept as hierarchy rather than flattening everything to one ink. Same weight, declared after, so it takes the labels back. */ .gate-live .mono, .gate-live .state, .gate-live .n, .gate-live .say, .gate-live .gl-caption { color: var(--steel) !important; } /* The accent marks are empty spans carrying a BACKGROUND, so the ink reset above cannot reach them, which is correct and is why they keep the accent. But Signal on white paper measures 2.63:1, under this project's own 3:1 floor for a non text element, so on paper they take the light ground accent instead. Signal Deep on white is 6.59:1, recomputed by the reviewer from the same WCAG formula contrast-check.py uses; my 6.68 was slightly off and both clear the 3:1 floor. Screen is untouched. */ .gl-strike, .gl-mark, .rule i, .label .idx::before { background-color: var(--signal-deep) !important; } /* The ledger is shown by `html.js .ledger.recording` at (0,3,0) inside a min-width query, which a wide paper size can satisfy, and that beats the main block's `.ledger` at (0,1,0). Matched at its own weight so a screen instrument cannot reach paper. */ html.js .ledger, html.js .ledger.recording { display: none; } /* The refusal rows carry a permanent inset and a hover ground. Neither belongs on paper: a printed ledger is a list, so the rows give back the inset and print flush to the document's own margin. */ .constraints li { padding-left: 0; padding-right: 0; margin-inline: 0; background-color: transparent; box-shadow: none; } } /* ========================================================================== THE LATTICE PASS. Added 2026-08-30 on the owner's read of the shipped site: it is boring, forgettable, and it could have been generated. He asked for big changes, for detail, and for something worth a second look, and he said he trusts the judgement. This block is that answer. THE ONE IDEA, AND EVERY DEVICE BELOW IS A CONSEQUENCE OF IT. The mark is a hexagonal lattice, six cells around one, inside a machined hexagonal wall rotated thirty degrees against the cells. That is not an ornament, it is a SYSTEM DIAGRAM, and this company sells a system that joins things up. So the lattice becomes the site's material. Nothing decorative is added below that is not the mark's own geometry at a different scale. The four things it builds, in order: 1. THE FIELD. Two superimposed lattices at the mark's own two scales, cells at the cell radius and walls at the wall radius, the small one flat top and the large one pointy top, exactly the thirty degree argument the identity document says the mark exists to make. It runs under every band on every page, so the page reads as one machined surface with differently lit windows cut in it rather than as slabs stacked on each other. 2. THE REGISTER. Each numbered section's numeral now sits in the core cell of a seven cell rosette, the mark's own construction, drawn hairline. The one filled cell in the mark is the core, so on this site A FILLED CELL MEANS A HUMAN RELEASE and nothing else: every stamp on the site, the gate's strike, the record marks, the ledger's released row, the sent status, becomes that cell. The square stamp is retired. 3. THE PLATE. Every card, tier, panel and artifact is chamfered at the top left and bottom right, the wall's own cut, with the cut faces LIT at the top left and SHADED at the bottom right, from the one light source this sheet has always had above the page. They read as machined plate rather than as rounded rectangles, which is what the whole current generation of generated pages ships. 4. THE HINGE. The band transitions stop being a gradient and become structural: the lattice surfaces at the crossing, resolves into cells as it breaks through, and a hard hairline marks the exact plane. A transition you can point at. WHAT THIS PASS DELIBERATELY DOES NOT DO, so the next reader knows it was considered rather than missed. No canvas and no WebGL, though both were offered: an animated field would be a second perpetual loop on a page whose whole discipline is that only the gate loops, it would need a script this lane does not own, and it would have to degrade to exactly the static field built here anyway, so the static field IS the honest artifact and the script would only add risk. No particles, no orbs, no mesh, no glass, no blur, no parallax of content, no third party anything. No new colour. Every value below is a named ladder token or a low alpha layer of one, and the compositing cap the elevation model states is respected and was MEASURED off the render rather than argued. ========================================================================== */ /* ---------- the geometry, stated once ---------- The mark is drawn in a 0 0 200 200 box. Its cell polygon is `22,0 11,-19.05 -11,-19.05 -22,0 -11,19.05 11,19.05`, a flat top hexagon of circumradius 22, and its wall is a pointy top hexagon of circumradius 88. Every path below is one of those two polygons, authored in the mark's own units so a reader can check it against brand/identity/v3/mark.svg by eye, and scaled by background-size alone. A flat top lattice of circumradius R tiles on 3R by root three R, with alternate columns offset half a row. A pointy top lattice of circumradius R tiles on root three R by 3R. EVERY TILE BELOW DRAWS THREE EDGES PER CELL, NOT SIX, AND THAT IS A CORRECTION RATHER THAN A SHORTCUT. The first cut drew whole hexagons, and in a honeycomb every interior edge belongs to two cells and every vertex to three, so a stroke set at nine percent painted at seventeen along an edge and twenty five at a vertex. Measured off the render, the field was sitting three times over its ceiling and nobody could have found that by reading the value. Each cell now draws only its upper right, lower right and lower edges, which is a set that tiles the whole lattice exactly once, so the alpha in the artwork is the alpha on the screen. THE DATA URIS ARE FIRST PARTY BY CONSTRUCTION. A data URI is not a request. Nothing here reaches the network, which is what the privacy page's zero third party requests claim needs and what an SVG file in this directory would also have satisfied but at the cost of a real request. The `#` of every internal reference is percent encoded, and there is no semicolon anywhere inside a URI, because a semicolon inside a declaration value is what breaks a naive stylesheet parser and this sheet is read by one, in contrast-check.py. ONE THING WILL TRIP A NAIVE GREP AND IT IS NOT A REQUEST. Every SVG below carries `xmlns='http://www.w3.org/2000/svg'`, so a search for `https?://` over this file returns EIGHTEEN hits, every one of them that namespace and nothing else. That string is an XML NAMESPACE NAME, not a locator: no engine resolves it, no engine fetches it, and an `image/svg+xml` data URI will not parse at all without it. The same string is already in index.html and pricing.html, on the inlined lockup, and has been since the identity shipped. THE COUNT IS RE MEASURED RATHER THAN CARRIED FORWARD, and it had already drifted before this pass touched it: it read sixteen while the file actually held seventeen, so the number was documentation rather than a check. The states pass adds one more artwork token and the file now holds eighteen, counted with `grep -oE 'https?://' | wc -l` against `grep -oE "xmlns='http://www.w3.org/2000/svg'" | wc -l`, which return the same number. That equality is the real test and it is the one to re run: a count that matches the namespace count means no locator has appeared. PROVEN RATHER THAN ASSERTED on the network side too: a full load of every page records only first party requests, and this pass re measured it, four requests on index.html, the document, this stylesheet and the two font files, all to this origin and nothing to w3.org. The privacy page's zero third party requests claim holds. */ :root { /* THE FIELD IS ENGRAVED, NOT PRINTED, AND THAT IS THE ONLY WAY IT COULD BE BOTH VISIBLE AND LEGAL. The elevation model caps every decorative LIGHTENING of a dark ground at Depth Raised, whose relative luminance is 0.0121, and the binding pair behind that cap is Tideline, the quiet button's own boundary, which needs its ground under 0.0156 to hold its 3:1 floor. A Tideline hairline drawn on Depth may therefore run at about a tenth and no more, and a tenth of Tideline on near black water is a line nobody sees. The first cut of this pass drew exactly that and it was invisible in the render, which is how the ceiling was found. A CUT LINE IS NOT SUBJECT TO THE CEILING. The cap governs lightening because lightening is what erodes a text pair; a line DARKER than the ground raises every pair on it and can be as strong as it likes. So the lattice is cut into the surface rather than laid on it: a near black groove at full strength, and one pixel down and right of it the capped Tideline hairline that is the light catching the groove's far lip. That is the same well the gate strip is cut with, at the scale of the page, and it is the same one light source above the page that governs every other device in this sheet. The eye reads an engraved honeycomb, which is many times more present than either line alone, and the lit half never leaves its ceiling. Every stroke alpha is baked into the artwork rather than applied at the point of use, because a background layer cannot carry an opacity of its own and the cut and the lit line need different ones. WHAT THE VALUES BELOW ACTUALLY MEASURE, sampled off a 1440 render of the shipped sheet rather than computed from the alphas. The brightest pixel the dark field produces anywhere on a text free part of the hero is rgb(14, 28, 55), luminance 0.01200, against Depth Raised's 0.01207. That is the elevation model's ceiling hit almost exactly, and the pairs over it come out at Daylight 15.10:1, Tide 7.75:1, Signal 6.45:1 and Tideline 3.17:1, which are the Depth Raised column of contrast-report.md to two decimal places. The field costs the page nothing it had not already measured. */ --lat-cell-cut: url("data:image/svg+xml,"); --lat-cell-lit: url("data:image/svg+xml,"); --lat-wall-cut: url("data:image/svg+xml,"); --lat-wall-lit: url("data:image/svg+xml,"); /* The same construction on paper, inverted: the groove darkens toward Boundary, which is the light ground's own non text stroke, and the far lip catches white. THE LIGHT GROUND IS THE HARDER OF THE TWO AND IT WAS TUNED THREE TIMES AGAINST MEASUREMENT. A groove on paper DARKENS the ground, which erodes every dark on light pair, and the binding one is not Steel, which is what the arithmetic suggested, but SIGNAL DEEP, the light band's link colour, which is darker. The first cut measured Steel at 3.58:1 and the second at 5.13:1 with Signal Deep still at 4.39:1, under the floor, and only the third clears both. Sampled off a text free part of the light band: the darkest pixel is rgb(211, 220, 233), luminance 0.7092, giving Steel 5.13:1, Signal Deep 4.77:1 and Depth 13.66:1. The white lip's brightest pixel is rgb(247, 249, 252), which is Shell, the light ground's stated lightening ceiling, reached and not passed. */ --lat-cell-cut-ink: url("data:image/svg+xml,"); --lat-cell-lit-ink: url("data:image/svg+xml,"); --lat-wall-cut-ink: url("data:image/svg+xml,"); --lat-wall-lit-ink: url("data:image/svg+xml,"); /* THE COMPONENT GRAIN. The same cell lattice at a quarter of the page's scale, for the inside of a plate. It is baked much fainter than the page field in its own artwork rather than dimmed at the point of use, because a background layer inside a list cannot carry an opacity of its own and the alternative is a second element. BOTH VALUES WERE SET BY MEASUREMENT, and the dark one was set twice. A grain inside a Depth Raised plate lightens a ground that is ALREADY at the elevation model's ceiling, so the governing pair is the one with the least headroom on that surface, which is Tideline, the colour of the cell marker on a dark card's own list. At 0.14 the grain peaked at rgb(17, 34, 71) and put Tideline at 2.93:1, under its 3:1 floor. At 0.07 it peaks at rgb(14, 30, 66) and gives Daylight 14.60:1, Tide 7.49:1 and Tideline 3.07:1. The light plate's grain darkens Shell instead and has room: its darkest pixel is rgb(232, 238, 247), giving Steel 6.09:1, Signal Deep 5.65:1 and Boundary 3.14:1. */ --grain-dark: url("data:image/svg+xml,"); --grain-ink: url("data:image/svg+xml,"); /* The placed scale. The cell runs at R 44 px, which puts a cell 88 px across, big enough to read as a lattice and far too big to read as a halftone. The wall runs at R 176 px, exactly four times the cell, which is the mark's own ratio of 88 to 22. The tiles are the arithmetic of those two numbers and are stated rather than rounded. */ --lat-cell-size: 132px 76.21px; --lat-wall-size: 304.84px 528px; /* The seven cell rosette, the mark's own construction: six cells ringing one, with the core drawn heavier because in the mark the core is the only filled shape. Cropped top and bottom to a 110 by 88 window so the register mark reads as a WINDOW ONTO THE FIELD rather than as a floating badge, and so it does not stand taller than the numeral's own line can carry in the rail. Two inks, one per ground. */ --rosette-dark: url("data:image/svg+xml,"); --rosette-ink: url("data:image/svg+xml,"); /* One cell on its own, for the smaller registers: the refusal numerals and the two list markers. Four inks, one per ground and per state, because a background image cannot take currentColor and a mask cannot be used here without masking the numeral sitting inside it. */ --cell-hairline: url("data:image/svg+xml,"); --cell-depth: url("data:image/svg+xml,"); --cell-tideline: url("data:image/svg+xml,"); --cell-boundary: url("data:image/svg+xml,"); /* THE CELL AS A CLIP PATH. The stamp's shape, everywhere the accent marks a release. The percentages are the flat top hexagon exactly, so any box given this clip and an aspect of 1 to 0.866 is the mark's own cell. */ --hex-flat: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); /* THE PLATE. The wall's cut, taken to a rectangle: the top left and the bottom right corners are chamfered and the other two are square, which is what a machined plate looks like and what a rounded rectangle does not. Two sizes, because a tier card and a status panel are not the same object. Border radius stays zero, by law: a chamfer is a cut, not a radius, and the two read as opposite kinds of manufacture. */ --cut: 16px; --cut-sm: 7px; --plate: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); --plate-sm: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm)); /* THE CUT FACES. A clip path removes everything before 0.708 of the cut along the 135 degree axis, which is the cut length over root two, so a stop placed just past that leaves a band lying exactly along the cut. That band IS the chamfer face. Lit at the top left and shaded at the bottom right, from the one light source above the page that this sheet has obeyed since the elevation model, and the same lighting the mark's own wall carries. */ --facet: 11.3px; /* 0.708 of --cut */ --facet-sm: 5px; /* 0.708 of --cut-sm */ /* ELEVATION FOR A CLIPPED PLATE. A box shadow is clipped away by a clip path, so the plates take drop-shadow instead, which follows the cut silhouette and therefore hugs the chamfer, which is better than what it replaces rather than a workaround for it. drop-shadow carries no spread, so the hairline ring of the box shadow model returns as an inset ring on the straight edges and as the lit and shaded facets on the cut ones. Together they close the edge all the way round. Same offsets, same blurs, same alphas as the box shadow tokens they mirror. */ --drop-card: drop-shadow(0 1px 2px rgba(7, 16, 38, 0.09)) drop-shadow(0 6px 14px rgba(7, 16, 38, 0.08)) drop-shadow(0 20px 40px rgba(7, 16, 38, 0.07)); --drop-card-lifted: drop-shadow(0 2px 4px rgba(7, 16, 38, 0.12)) drop-shadow(0 12px 26px rgba(7, 16, 38, 0.10)) drop-shadow(0 30px 64px rgba(7, 16, 38, 0.09)); --drop-raised-dark: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.40)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.34)) drop-shadow(0 24px 52px rgba(0, 0, 0, 0.28)); --drop-lifted-dark: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.44)) drop-shadow(0 14px 30px rgba(0, 0, 0, 0.38)) drop-shadow(0 34px 74px rgba(0, 0, 0, 0.30)); } /* ========================================================================== 1. THE FIELD ========================================================================== THE COMPOSITING CAP GOVERNS THE LIT HALF AND NOT THE CUT HALF, WHICH IS THE WHOLE REASON THE FIELD CAN BE SEEN AT ALL. The elevation model states that no decorative lightening of a dark ground may composite lighter than DEPTH RAISED, whose measured luminance is 0.01207, and the pair with the least headroom against that is Tideline, the quiet action's own boundary, which needs its ground under 0.0156 to hold 3:1. Lightening is therefore capped hard. DARKENING is not capped by anything, because a line darker than the ground raises every pair sitting on it. So the groove carries the drawing and the lit lip carries only the light, and the visible result is several times what a printed line of the same legal weight could be. Everything above was computed and then MEASURED off the render by sampling the brightest pixel of a text free region of every dark band, because a computed cap that is never sampled is an argument rather than a check. The values are in the token block above, beside the artwork they came from. The light grounds are the opposite case: the groove DARKENS Limestone, the binding pair is Signal Deep rather than Steel, and the tuning took three passes to clear it. The light bands end up carrying a genuinely visible lattice, which is deliberate. They are the emptiest surfaces on the site and they were most of what read as boring. */ /* The field under the unbanded page. Sections 01 and 02 sit directly on the body ground with no band wrapper of their own, so the body carries the field for them. Absolutely positioned rather than fixed by DEFAULT, and promoted to fixed inside the no preference query at the foot of this block, which is this sheet's fail safe shape applied to a ground: the finished frame is the still one. */ body::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--lat-cell-cut), var(--lat-cell-lit), var(--lat-wall-cut), var(--lat-wall-lit); background-size: var(--lat-cell-size), var(--lat-cell-size), var(--lat-wall-size), var(--lat-wall-size); background-position: 0 0, 1px 1px, 0 0, 1px 1px; background-repeat: repeat, repeat, repeat, repeat; } /* Each band paints its own ground, so each band carries its own window onto the same field. The layers are identical and the anchor is shared, so at the widths where the field is fixed the cells run straight through every boundary on the page and the bands read as differently lit openings cut into one material. */ .hero::before, .p-hero::before, .dark::before, .statement::before, .site-footer::before, .light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-repeat: repeat, repeat, repeat, repeat; /* The lit line sits one pixel down and right of the cut it belongs to, which is the far lip of the groove facing a light source above and to the left. One pixel, because the stroke is one pixel: any more and the two stop reading as one cut and start reading as two lattices. */ background-position: 0 0, 1px 1px, 0 0, 1px 1px; background-size: var(--lat-cell-size), var(--lat-cell-size), var(--lat-wall-size), var(--lat-wall-size); } /* The bands need a stacking context so the field sits above their own ground and their gradients and below every word on them. isolation, not z-index, because a z-index here would enter the header and ledger's ordering conversation and this element has no business in it. */ .hero, .p-hero, .dark, .statement, .site-footer, .light { position: relative; isolation: isolate; } /* THE HERO DECLARES ITS OWN GROUND, AND UNTIL THIS PASS IT DID NOT NEED TO. The hero paints two radial washes and no background COLOUR, so it was transparent and the body's ground showed through it, which was invisible and harmless while the body's ground was flat. It is not harmless now: the body carries the field for the unbanded sections, so a transparent hero painted the lattice twice, once from the body and once from its own layer, and the two alphas compounded. Found by sampling the render, not by reading the rule. Depth is the colour it was already inheriting. */ .hero, .p-hero { background-color: var(--depth); } /* Everything inside a band rides above its field. One rule, at the band, so no component has to know the field exists. */ .hero > *, .p-hero > *, .dark > *, .statement > *, .site-footer > *, .light > * { position: relative; z-index: 1; } .dark::before, .statement::before, .site-footer::before { background-image: var(--lat-cell-cut), var(--lat-cell-lit), var(--lat-wall-cut), var(--lat-wall-lit); } .light::before { background-image: var(--lat-cell-cut-ink), var(--lat-cell-lit-ink), var(--lat-wall-cut-ink), var(--lat-wall-lit-ink); } /* THE HERO'S FIELD IS MASKED AWAY FROM THE LIGHT, AND THE REASON IS MEASURED, NOT COMPOSITIONAL. The hero's vignette already lifts its ground to rgb(18, 38, 73) at the wash's brightest point, and contrast-report.md measures Signal over exactly that at 5.74:1. The field on top of the wash's own brightest point would take Signal under the 4.5 floor, so the field is thinned to a third where the wash is strongest and runs at full where the ground is flat Depth again. The two never reach their maxima at the same pixel, which is the only way both may run at full strength. It also happens to be the right picture: light drowns machining, and you see the lattice where the light is not. */ .hero::before, .p-hero::before { background-image: var(--lat-cell-cut), var(--lat-cell-lit), var(--lat-wall-cut), var(--lat-wall-lit); -webkit-mask-image: radial-gradient(58% 44% at 72% -16%, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.72) 46%, rgba(0, 0, 0, 1) 88%); mask-image: radial-gradient(58% 44% at 72% -16%, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.72) 46%, rgba(0, 0, 0, 1) 88%); } /* The field's ink, set once per ground as an alpha on the layer rather than inside the artwork, so one number governs the cap on each side. The two layers are given separate opacities through separate elements would be worse than this: the artwork carries the relative weight in its own stroke widths, 0.6 against 0.5, and the layer carries the absolute. */ .dark::before, .statement::before, .site-footer::before, .hero::before, .p-hero::before, .light::before { opacity: 1; } /* The document pages carry the field on their .light wrapper already, and the privacy page's band is the whole document, so nothing more is needed there. This rule exists only to say that out loud. */ /* ========================================================================== 2. THE HINGE, MADE STRUCTURAL ========================================================================== The band transitions were a tonal ramp and nothing else, which is a FADE, and a fade is the least engineered thing a boundary can be. The ramp stays, because the ladder crossed in order is the palette's own device and it works. What is added is what the ramp was missing: the lattice SURFACES at the crossing. Cells resolve out of the ground as it rises through the ladder, they are at their strongest exactly at the plane where the ground breaks, and a single hard hairline marks that plane so a reader can point at it. The hinge grows one interval to pay for it, from four rem to six, and drops to four on a phone as before. */ :root { --v-hinge: var(--s9); } @media (max-width: 40rem) { :root { --v-hinge: var(--s8); } } .waterline, .waterline-up { position: relative; overflow: hidden; } /* The cells that surface. Cell scale only, no wall layer: the wall lattice is 528 px tall and a six rem strip would show one twelfth of one wall, which is a line, not a hexagon. The mask peaks at the crossing and dies into both grounds, so the cells are a thing the surface DOES rather than a texture laid over it. */ .waterline::before, .waterline-up::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--lat-cell-cut), var(--lat-cell-lit); background-size: var(--lat-cell-size), var(--lat-cell-size); background-position: 0 0, 1px 1px; background-repeat: repeat, repeat; opacity: 1; } /* The descent crosses at 90 percent of the strip, where the ramp reaches Tideline. The ascent crosses at 13 percent, for the same reason at the other end. Both numbers are read off the ramp above rather than chosen. */ .waterline::before { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%); } .waterline-up::before { background-image: var(--lat-cell-cut-ink), var(--lat-cell-lit-ink); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 11%, rgba(0,0,0,0.30) 36%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 11%, rgba(0,0,0,0.30) 36%, rgba(0,0,0,0) 100%); } /* The plane itself. One hairline, hard, full bleed, at the exact percentage the ramp crosses the ladder. This is the difference between a boundary that is faded and a boundary that is CUT, and it is one pixel. */ .waterline::after, .waterline-up::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--tideline); opacity: 0.9; pointer-events: none; } .waterline::after { top: 90%; } .waterline-up::after { top: 13%; } /* ========================================================================== 3. THE REGISTER, AND THE FILLED CELL ========================================================================== THE NUMERAL SITS IN THE CORE CELL. The register numerals were big and nothing else, which is the one thing on the page the palette permits a glow on and the one thing a reader should be able to identify from across a room. They now sit inside the mark's own seven cell construction, drawn hairline, with the numeral in the core. The six ring cells are cropped by the window, top and bottom, so it reads as an aperture onto the field running behind the whole page rather than as a badge stuck on it. THE NUMERAL COMES DOWN ONE STEP TO PAY FOR THE ROSETTE. --t-index's ceiling moves from 3.25rem to 2.75rem, because the cluster is 4.25 times the numeral wide and has to seat inside the rail. The register reads LARGER for it: a 44 px numeral inside a 187 px rosette is a bigger, louder object than a 52 px numeral with air around it, and it is one no template ships. The rail column grows a step and a half to 13rem to seat it, which is the only grid dimension this pass touches, and it moves the reading column further from the fixed ledger rather than nearer, so the ledger's measured 86rem breakpoint holds without re deriving it. */ :root { --t-index: clamp(1.75rem, 1.15rem + 1.7vw, 2.75rem); } .label .idx { display: block; width: max-content; position: relative; padding: 0.28em 0; margin-bottom: var(--s4); } /* 4.25em wide by 3.4em tall is the 110 by 88 window at the scale that puts the core cell 1.7em across, which seats a two digit tabular numeral with a quarter em of clear space each side. Stated so the next person changing --t-index can check it rather than eyeball it. */ .label .idx::before { content: ""; position: absolute; left: 50%; top: 50%; width: 4.25em; height: 3.4em; transform: translate(-50%, -50%); background-image: var(--rosette-dark); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } .light .label .idx::before { background-image: var(--rosette-ink); } /* The rail label's tick is retired where the rosette stands. A two rem bar above a hexagonal rosette is two ornaments doing one job, and the rosette is the one derived from the mark. The tick survives untouched everywhere else it is used, which is the hero signature line. */ .rail-label::before { display: none; } @media (min-width: 64rem) { .rail { grid-template-columns: 13rem minmax(0, 1fr); } /* The rosette stands 1.2em above the numeral's own line, so the sticky label is dropped that far clear of the header rather than sliding its top cells under it. */ .rail > .rail-label { top: 7.5rem; padding-top: 0; } } /* THE FILLED CELL IS THE STAMP. In the mark exactly one shape is filled and it is the core cell, so on this site a filled cell means a human release and nothing else. That retires the square stamp of design direction V2 section 9.3 in favour of a shape derived from the identity rather than chosen, and it makes the accent's one meaning legible as a FORM as well as a colour, which matters to a reader who cannot separate the two. Every box below is at the cell's own 1 to 0.866 ratio, so the clip cuts a true hexagon and not a squashed one. The statement line's full stop is NOT included and must not be. It is a full stop, sized to the wordmark's own, and a hexagonal full stop is a punctuation error wearing a costume. */ .gl-record .gl-mark, .form-status .status-mark, .ledger-mark { width: 0.72rem; height: 0.624rem; clip-path: var(--hex-flat); } /* The strike lands in the gate. It was a bar; it is the cell the released piece occupies. Wider than the record marks because the gate is where the release happens and the record is only where it is written down. */ .gl-strike { width: 1.2rem; height: 1.04rem; clip-path: var(--hex-flat); } /* The refusal numerals take a single cell, one scale below the register's rosette, so the ledger of limits reads as the same instrument at a smaller magnification rather than as a different device. */ .constraints li::before { display: grid; place-items: center; width: 3.5rem; height: 3.03rem; background-image: var(--cell-hairline); background-size: 100% 100%; background-repeat: no-repeat; transition: background-image var(--t-hover) var(--ease); } /* Hover reveals structure rather than adding decoration: the cell the row is held in resolves from the decorative hairline to the structural neutral, which is the same move the row's own ground makes underneath it. Both inks are already in the report. */ @media (hover: hover) { .constraints li:hover::before { background-image: var(--cell-depth); } } /* The list marker, one scale below again. Every list on this site was ruled rather than bulleted, which is correct for a register and left the lists looking like table rows. A cell marker says the same thing the rules say, that these are items in a system, and says it in the system's own shape. */ .card ul li, .tier .axes li { position: relative; padding-left: 1.55rem; } .card ul li::before, .tier .axes li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.62rem; height: 0.537rem; background-image: var(--cell-boundary); background-size: 100% 100%; background-repeat: no-repeat; } /* ========================================================================== 4. THE PLATE ========================================================================== Every card, tier, panel and artifact on this site was a rectangle with a shadow, which is the single most generated looking object on the web. The mark's wall is a machined hexagon with a lit chamfer at the top left and a shadowed one at the bottom right. Taken to a rectangle, that is a plate chamfered on the same diagonal, and it is what the identity has been drawing on every surface since it was locked. HOW THE EDGE CLOSES, because a clipped box loses its box shadow and this is the part that is easy to get wrong. The straight edges take an INSET ring, which a clip path does not remove because it is painted inside the box. The two cut edges take a lit face and a shaded face, drawn as a gradient band lying exactly along the cut, at 0.708 of the cut length along the 135 degree axis, which is the cut over root two. Elevation moves from box-shadow to drop-shadow, which follows the cut silhouette, so the shadow hugs the chamfer instead of ignoring it. EVERY RULE BELOW THAT BRINGS A LIGHT BACKGROUND ALSO BRINGS ITS OWN INK, including the pseudo elements, which is the structural rule contrast-check.py added on 2026-08-30 after .card shipped at 1.06:1. A pseudo element that paints Shell is exactly the shape that bug had. */ .card, .tier, .sched, .form-status .status-inner { clip-path: var(--plate); box-shadow: none; filter: var(--drop-card); background-repeat: no-repeat, no-repeat, repeat; background-size: 100% 100%, 100% 100%, var(--lat-cell-size); } /* THE CARD'S DEFAULT GROUND IS THE DARK ONE, WHICH IS A REVERSAL AND IT IS THE RIGHT WAY ROUND. Every card on the site was a near white slab, and on index.html section 02's four cards sit on the page's own DARK ground, so the dark chapter was interrupted by four white rectangles floating on deep water. That is most of why the first half of the page read as assembled rather than composed. A card is now a machined panel of the same water it sits in, one step raised, and it becomes a Shell plate only inside a light band, where Shell is the raised surface of that ground. Daylight on Depth Raised is 15.09:1 and Tide on Depth Raised is 7.75:1, so the panel is LOUDER to read than the slab it replaces, not quieter. Checked against both pages before the reversal rather than after it: index.html's four runs cards sit on the body ground, its two ownership cards sit inside .light, and pricing.html's two exit cards sit inside .light. The scoping below covers all three without either page needing a class it does not already have. */ .card { padding: var(--s6); color: var(--daylight); background-color: var(--depth-raised); background-image: linear-gradient(135deg, rgba(157, 176, 214, 0.34) 0 calc(var(--facet) + 2px), rgba(157, 176, 214, 0) calc(var(--facet) + 2px)), linear-gradient(315deg, rgba(0, 0, 0, 0.55) 0 calc(var(--facet) + 2px), rgba(0, 0, 0, 0) calc(var(--facet) + 2px)), var(--grain-dark); background-size: 100% 100%, 100% 100%, 33px 19.05px; box-shadow: inset 0 1px 0 rgba(157, 176, 214, 0.15), inset 0 0 0 1px var(--depth-lifted); filter: var(--drop-raised-dark); } .card h3 { color: var(--daylight); } .card li, .card p { color: var(--tide); } .card li + li { border-top-color: var(--depth-lifted); } .card ul li::before { background-image: var(--cell-tideline); } /* The light plates. Ground, then the two cut faces, then the grain: the same cell lattice the page is made of, running through the object at a quarter of the page's scale, so a reader who leans in finds the material continues inside the thing sitting on it. Ink is declared on every rule that brings Shell, as the structural rule requires. */ .light .card, .tier, .sched { color: var(--depth); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0 calc(var(--facet) + 2px), rgba(255, 255, 255, 0) calc(var(--facet) + 2px)), linear-gradient(315deg, rgba(7, 16, 38, 0.16) 0 calc(var(--facet) + 2px), rgba(7, 16, 38, 0) calc(var(--facet) + 2px)), var(--grain-ink); background-color: var(--shell); background-size: 100% 100%, 100% 100%, 33px 19.05px; box-shadow: inset 0 0 0 1px rgba(7, 16, 38, 0.10); filter: var(--drop-card); } .light .card h3 { color: var(--depth); } .light .card li, .light .card p { color: var(--steel); } .light .card li + li { border-top-color: var(--hairline); } .light .card ul li::before { background-image: var(--cell-boundary); } /* The gate artifact and the ledger are the same instrument at two magnifications, so they take the same plate. The gate keeps its recessed gate strip, which is the one thing on the site that goes down. */ .gate-live { clip-path: var(--plate); box-shadow: inset 0 1px 0 rgba(157, 176, 214, 0.18), inset 0 0 0 1px var(--depth-lifted); filter: var(--drop-raised-dark); background-color: var(--depth-raised); background-image: linear-gradient(135deg, rgba(157, 176, 214, 0.38) 0 calc(var(--facet) + 2px), rgba(157, 176, 214, 0) calc(var(--facet) + 2px)), linear-gradient(315deg, rgba(0, 0, 0, 0.58) 0 calc(var(--facet) + 2px), rgba(0, 0, 0, 0) calc(var(--facet) + 2px)), var(--grain-dark); background-size: 100% 100%, 100% 100%, 33px 19.05px; background-repeat: no-repeat, no-repeat, repeat; overflow: visible; } /* THE GATE STRIP IS A SLOT CUT ACROSS THE LATTICE. The module hatch was eleven vertical hairlines on the identity's 11 unit module, which is a true derivation and an invisible one: eleven straight lines read as a texture, not as a structure. The same idea is stronger drawn in the material the rest of the page is made of, so the strip now carries the cell grain at the plate's own scale and a bright hairline along its top lip, which is where a well cut into a surface catches the light from the far side. The recess shadow, the two rules and the mono line are all unchanged. */ .gl-gate { background-image: linear-gradient(180deg, rgba(157, 176, 214, 0.16) 0 1px, rgba(157, 176, 214, 0) 1px), var(--grain-dark); background-size: 100% 100%, 33px 19.05px; background-repeat: no-repeat, repeat; background-color: var(--depth); } /* The ledger floats, so it takes the lifted drop and the small cut: it is a 20rem box and a 16px chamfer on it would eat the corner rather than cut it. */ @media (min-width: 86rem) { html.js .ledger.recording { clip-path: var(--plate-sm); box-shadow: inset 0 1px 0 rgba(157, 176, 214, 0.22), inset 0 0 0 1px var(--depth-lifted); filter: var(--drop-lifted-dark); background-image: linear-gradient(135deg, rgba(157, 176, 214, 0.34) 0 calc(var(--facet-sm) + 2px), rgba(157, 176, 214, 0) calc(var(--facet-sm) + 2px)), linear-gradient(315deg, rgba(0, 0, 0, 0.55) 0 calc(var(--facet-sm) + 2px), rgba(0, 0, 0, 0) calc(var(--facet-sm) + 2px)), var(--grain-dark); background-size: 100% 100%, 100% 100%, 33px 19.05px; background-repeat: no-repeat, no-repeat, repeat; background-color: var(--depth-raised); } } /* ========================================================================== 5. THE ACTION ========================================================================== The primary action takes the plate's cut too, because it is the loudest object on any screen and a square one is the same square every generated page ships. It is cut on the PSEUDO ELEMENT rather than on the button, and that is not tidiness: a clip path clips the outline as well as the box, so clipping the button itself would clip its own focus ring away entirely at a 2px offset. The ring is drawn on the unclipped element and is untouched. The glow moves from box-shadow to drop-shadow for the same reason the plates did, and it is better for it: the light now hugs the cut faces instead of haloing a rectangle that is not there. */ .btn-primary, button[type="submit"] { position: relative; isolation: isolate; background: transparent; border-color: transparent; box-shadow: none; } .btn-primary::before, button[type="submit"]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal); clip-path: var(--plate-sm); filter: drop-shadow(0 1px 2px rgba(7, 16, 38, 0.40)) drop-shadow(0 4px 14px rgba(77, 163, 255, 0.26)) drop-shadow(0 12px 30px rgba(77, 163, 255, 0.17)); transition: background-color var(--t-hover) var(--ease), filter var(--t-hover) var(--ease); } .btn-primary:hover::before, button[type="submit"]:hover::before { background: var(--signal-bright); filter: drop-shadow(0 1px 2px rgba(7, 16, 38, 0.40)) drop-shadow(0 6px 20px rgba(77, 163, 255, 0.40)) drop-shadow(0 18px 44px rgba(77, 163, 255, 0.26)); } /* The header's action keeps its shorter light, for the geometry reason the compact glow tokens already state: the full glow's widest layer overruns the sticky bar's own padding and paints haze on the paper below it. */ .btn-primary.btn-compact::before { filter: drop-shadow(0 1px 2px rgba(7, 16, 38, 0.40)) drop-shadow(0 2px 10px rgba(77, 163, 255, 0.32)); } .btn-primary.btn-compact:hover::before { filter: drop-shadow(0 1px 2px rgba(7, 16, 38, 0.40)) drop-shadow(0 3px 12px rgba(77, 163, 255, 0.46)); } /* The quiet action is cut on the same diagonal so the pair reads as one set. It carries a drawn boundary rather than a fill, so the cut is drawn by two facets in its own boundary colour and the straight edges by an inset ring, exactly the plate's construction one size down. */ /* The quiet action is cut on the same diagonal so the pair reads as one set, and it is cut on a PSEUDO ELEMENT for the same reason the primary action is: the measurement on the form fields below proves a clip path takes the focus ring with it. Its drawn boundary is an inset ring on the straight edges and a facet in its own boundary colour on the cut ones, which is the plate's construction one size down and in outline instead of fill. */ .btn-quiet { position: relative; isolation: isolate; border-color: transparent; background: transparent; } .btn-quiet::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--plate-sm); box-shadow: inset 0 0 0 1px var(--tideline); background-image: linear-gradient(135deg, var(--tideline) 0 calc(var(--facet-sm) + 1px), rgba(66, 106, 178, 0) calc(var(--facet-sm) + 1px)), linear-gradient(315deg, var(--tideline) 0 calc(var(--facet-sm) + 1px), rgba(66, 106, 178, 0) calc(var(--facet-sm) + 1px)); background-repeat: no-repeat, no-repeat; transition: background-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); } .btn-quiet:hover { background: transparent; } .btn-quiet:hover::before { background-color: var(--depth-raised); box-shadow: inset 0 0 0 1px var(--tide); } .light .btn-quiet { color: var(--depth); background: transparent; } .light .btn-quiet::before { box-shadow: inset 0 0 0 1px var(--boundary); background-image: linear-gradient(135deg, var(--boundary) 0 calc(var(--facet-sm) + 1px), rgba(114, 134, 173, 0) calc(var(--facet-sm) + 1px)), linear-gradient(315deg, var(--boundary) 0 calc(var(--facet-sm) + 1px), rgba(114, 134, 173, 0) calc(var(--facet-sm) + 1px)); } .light .btn-quiet:hover { color: var(--depth); background: transparent; } .light .btn-quiet:hover::before { background-color: var(--shell); } /* ========================================================================== 6. THE TYPE, PUSHED ========================================================================== THE PROSE MOVES TO THE DRAWN SERIF, AND IT IS THE BIGGEST SINGLE CHANGE IN THIS PASS. Body copy ran the system sans stack, which means it ran San Francisco on a Mac, Segoe on Windows and Roboto on Android: three different voices for the same sentence, and every one of them the safe face that the current generation of generated pages is set in. This sheet already refuses that split for the display face and self hosts Charis precisely so every visitor sees the same drawing. The prose now gets the same treatment from the same two files at no extra request. THREE REGISTERS, ONE JOB EACH, AND NOW NO FOURTH. The drawn serif is the DOCUMENT. The monospace is the RECORD. The system sans survives as the INSTRUMENT'S CHROME and nothing else: the actions, the nav, the eyebrow labels, the form labels, the artifact's own state words. A reader can tell which of the three they are looking at without reading it, which is what a register is for. Body rises from 17px to 18px and the leading loosens a hair, because a transitional serif at the sans's own size reads one step smaller than the sans did and the 65 to 75 character measure is held by the ch unit, which resolves against whatever face the element is actually set in and so corrects itself. */ body { font-family: var(--serif); font-size: 1.125rem; line-height: 1.62; } :root { --t-body: 1.125rem; } /* The chrome keeps the sans. Stated as one list rather than left to the rules that already set it, so the boundary between the document voice and the instrument voice is one place in this sheet and not fifteen. */ .btn, button[type="submit"], .site-nav a, .site-footer a, .label, .field label, .gl-row .what, .tier .tname, .sched thead th, .sched tbody th, .form-status .status-title { font-family: var(--sans); } /* The eyebrow opens out. A label at twelve pixels with a fifth of an em between its letters reads as an instrument's own legend rather than as small copy, and the extra tracking is what buys the scale contrast back at the quiet end now that the loud end has moved again. */ .label { letter-spacing: 0.2em; font-weight: 600; } /* THE LOUD END STRETCHES ONCE MORE. The statement line is the site's signature sentence and it is the loudest type on it; the display line is the h1 of the two pages that own one. The ratio from the twelve pixel label to the statement moves from roughly twelve to one to roughly fourteen to one, which is the lever the design direction names as the single biggest one available, spent again. THE DISPLAY CEILING IS SET BY THE COPY AND THE COPY IS MOVING. The 6.5rem ceiling was measured against a sentence that has since been rewritten by the copy lane, so it is re measured here against what is actually on the page and must be re measured again if the sentence changes again. */ :root { --t-statement: clamp(3.25rem, 1.2rem + 10.4vw, 10rem); --t-display: clamp(3rem, 1.25rem + 7.1vw, 7rem); } .statement-line { letter-spacing: -0.02em; } h1 { letter-spacing: -0.018em; } /* ========================================================================== 7. THE SECOND LOOK ========================================================================== Detail that rewards a reader who stays. Every one of these is a state a surface enters when a person is on it, so none of them fires while the page is still, which is the line this design has always held. */ /* A plate a reader is holding rises to the lifted step, the same step the refusal rows and the focused input already take. Shadow and edge only. The one pixel rise lives in the no preference query at the foot of this block, so a reader who asked for stillness gets the whole light response and simply gets it without the movement. */ @media (hover: hover) { .tier:hover, .sched:hover { filter: var(--drop-card-lifted); } .card:hover { filter: var(--drop-lifted-dark); } .light .card:hover { filter: var(--drop-card-lifted); } /* The schedule is the site's most inspectable record, so the row under the pointer resolves out of it. The ground steps from Shell back down to LIMESTONE, which is a named ladder step and an already measured one, not a tinted overlay: Steel on Limestone is 6.10:1 and Depth on Limestone is 16.68:1, both in the report, so this hover adds no pair. Ground only, no colour change, no movement, which is the same answer the refusal rows give. A HOVER ON THE GATE ARTIFACT WAS BUILT AND THEN REMOVED. The rows would have taken a Depth Lifted ground, which reads well and puts Tide on Depth Lifted, a pair NOT in contrast-report.md. It is 7.11:1 and would have passed, and that is not the point: the rule is that no pair outside the report appears, and the gate is a passive artifact that the design direction says must stay still under a pointer anyway. Two reasons, one deletion, recorded so it is not rebuilt. */ .sched tbody tr:hover th, .sched tbody tr:hover td { background-color: var(--limestone); } } /* THE SEAM RULE GAINS ITS CELL. The seam is the identity's two step offset drawn as a section rule, and it now carries one cell of the lattice at the step, so the place where the rule changes level is the place where the material shows through. Drawn on the container, positioned at 9/16 of its width, which is where the step is and is stated in the seam block above rather than re derived here. */ .seam { position: relative; } .seam::after { content: ""; position: absolute; left: calc(56.25% - 0.44rem); top: 50%; width: 0.88rem; height: 0.762rem; transform: translateY(-50%); background-image: var(--cell-tideline); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } .light .seam::after { background-image: var(--cell-hairline); } /* ========================================================================== 8. MOTION, THE LATTICE PASS ADDITIONS ========================================================================== The vocabulary does not grow. It is still ARRIVE, HOLD, RELEASE: a rise with a fade for anything arriving, a pause for anything held, and a 120ms settle from 1.12 for anything stamped. Nothing new loops. The gate remains the only perpetual motion on the site. Every rule here keeps this sheet's fail safe shape: the finished, still frame is the stylesheet default and lives outside this query, and what is inside is added on top of it. There is no opacity 0 anywhere below. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* THE FIELD IS ANCHORED TO THE VIEWPORT RATHER THAN TO EACH BAND, and that is what makes the page one material instead of several. Every band's window shares one anchor, so a cell that starts in the dark chapter finishes in the light one and the lattice runs unbroken through every hinge on the page. IT IS INSIDE THIS QUERY ON PURPOSE. A viewport anchored ground does not animate and is not motion in the WCAG sense, but it does move relative to the content over it, and a reader who has asked for stillness has asked for exactly that not to happen. The default, outside this query, is a ground that scrolls with its own band: each band starts its own lattice at its own top edge, which at five percent ink is a difference nobody can see and a promise nobody has to trust. */ body::before { position: fixed; } .hero::before, .p-hero::before, .dark::before, .statement::before, .site-footer::before, .light::before { background-attachment: fixed, fixed; } /* The plate a reader is holding rises the same single pixel the primary action does, on the transform property only. */ .card, .tier, .sched { transition: filter var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); } .card:hover, .tier:hover, .sched:hover { transform: translateY(-1px); } /* The gate's strike and every record mark already settle from 1.12 under the existing keyframe. Now that they are cells rather than squares the settle reads as a cell dropping into its seat, which is the gesture the artifact is describing. Nothing here changes but the shape it acts on, so no new keyframe is added. */ } /* ========================================================================== 9. THE TWO NEW SURFACES IN THE MARKUP, STYLED ========================================================================== Both landed from the markup lane while this pass was being built. They are given the system's own vocabulary rather than a treatment of their own, so nothing here is a new device. ========================================================================== */ /* THE TURN IN THE HERO. The lede is two paragraphs doing two jobs: the first names the reader's own week back to them, the second turns to what we do about it. Rendered identically they read as one long block and the turn is lost, which is the moment the page either earns the scroll or does not. THE MARKUP LANE'S FIRST CUT DREW THAT TURN IN SIGNAL, AND THAT IS THE ONE THING IT MAY NOT BE. The accent marks a person acting and nothing else, which is why the hero's signature bar and the rail's own ornament are both Tideline; an accent spent on a paragraph break spends the meaning that makes the primary action loud. So the turn is marked with the material instead: one cell of the lattice, hairline, the same cell the register numerals sit in and the same cell a release fills. The paragraph steps from Tide to Daylight, which is the page's own strongest pair and a bigger change than a coloured rule was. */ .hero .lede.turn { margin-top: var(--s5); padding-top: calc(var(--s5) + 0.4rem); position: relative; color: var(--daylight); } .hero .lede.turn::before { content: ""; position: absolute; top: 0; left: 0; width: 1.15rem; height: 0.996rem; background-image: var(--cell-tideline); background-size: 100% 100%; background-repeat: no-repeat; } /* The cell sits at the left end of the tick the hero's own signature line already draws, so the turn is marked with the two ornaments this site already owns rather than a third one: the neutral bar, and the material's own cell sitting on it. Both Tideline, both non text, neither an accent. */ .hero .lede.turn::after { content: ""; position: absolute; top: calc(0.498rem - 1px); left: 1.45rem; width: 2rem; height: 2px; background: var(--tideline); } /* THE DIAGRAM. The visual thesis of the company, so it is given the loudest frame the system owns: a machined plate on the dark ground, cut on the wall's diagonal, with the grain running through it and the artwork sitting on its own inset. It breaks the reading measure deliberately, because it is the one object on the page that is an argument rather than a sentence, and it is the only thing below the hero that gets to be that wide. The caption runs the record's mono at the label's own tracking, under a hairline, so it reads as the plate's legend and not as a sentence that happened to end up under a picture. */ .diagram { margin: var(--v-block) 0 0; padding: var(--s6) var(--s6) var(--s5); color: var(--daylight); background-color: var(--depth-raised); background-image: linear-gradient(135deg, rgba(157, 176, 214, 0.34) 0 calc(var(--facet) + 2px), rgba(157, 176, 214, 0) calc(var(--facet) + 2px)), linear-gradient(315deg, rgba(0, 0, 0, 0.55) 0 calc(var(--facet) + 2px), rgba(0, 0, 0, 0) calc(var(--facet) + 2px)), var(--grain-dark); background-size: 100% 100%, 100% 100%, 33px 19.05px; background-repeat: no-repeat, no-repeat, repeat; clip-path: var(--plate); box-shadow: inset 0 1px 0 rgba(157, 176, 214, 0.16), inset 0 0 0 1px var(--depth-lifted); filter: var(--drop-raised-dark); } .diagram img, .diagram svg { display: block; width: 100%; height: auto; } .diagram figcaption { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--depth-lifted); font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.04em; line-height: 1.6; color: var(--tide); max-width: none; } /* The plate is wider than the prose it sits among, at the widths where there is room for it to be. It reaches into the rail's own column on the left, which is where the register numerals live, so the diagram interrupts the register exactly once and the interruption is the point. */ @media (min-width: 64rem) { .diagram { margin-left: calc((13rem + var(--s7)) * -1); margin-right: calc(var(--s5) * -1); } } /* ========================================================================== 10. PRINT, THE LATTICE PASS ADDITIONS ========================================================================== AT THE FOOT OF THE SHEET, FOR THE REASON THE PREVIOUS PRINT BLOCK STATES AT LENGTH: a media query adds no specificity, so every ground, plate, field and cut this pass declared above would outrank the print resets that sit at the sheet's midpoint and paint themselves onto paper. Paper has no light source, so it has no engraving: the field, the facets, the drops and the cuts all resolve to nothing and the page prints as ink on white. ========================================================================== */ @media print { /* The field. Every window onto it, including the body's own, and both hinges. A honeycomb printed at any strength is a printer's nightmare and none of it is information. */ body::before, .hero::before, .p-hero::before, .dark::before, .statement::before, .site-footer::before, .light::before, .waterline::before, .waterline-up::before, .waterline::after, .waterline-up::after, .seam::after, .label .idx::before, .hero .lede.turn::before { display: none; } .card ul li::before, .tier .axes li::before, .hero .lede.turn::after { display: none; } /* THE HERO PRINTED ON A DARK GROUND, AND THIS PASS IS WHAT PUT IT THERE. The main print block resets .hero, and the foot block resets it again for the wash, but this pass gave the hero an explicit Depth background BELOW both of them, so it outranked them by position exactly the way the wash outranked the main block in the depth and flow pass. Same defect, same cause, same fix, and found the same way: by rendering the print cascade and looking at it rather than by reading the rule. The gate strip is here for the same reason, one layer down: it is declared in this pass with its own Depth ground and its own lattice, so the earlier block's reset could not reach it and the strip printed as a dark bar across a white artifact. */ .hero, .p-hero, .gl-gate { background-color: #FFFFFF; background-image: none; } .card ul li, .tier .axes li { padding-left: 0; } /* The plates. The cut, the facets, the grain and the drop shadow all go, and every surface returns to the white ground and the drawn boundary the main print block already asks for. The dark card is included by name: it is declared in this pass and would otherwise print its Depth Raised ground and its Daylight ink, which is a black rectangle. */ .card, .tier, .sched, .gate-live, .diagram, .form-status .status-inner, .btn-primary, button[type="submit"], .btn-quiet { clip-path: none; filter: none; background-image: none; background-color: #FFFFFF; color: var(--depth); box-shadow: none; } .card h3, .card li, .card p, .diagram figcaption, .hero .lede.turn { color: var(--depth); } /* THE TURN PRINTED IN NEAR WHITE ON WHITE PAPER, an entire paragraph of the hero gone. `.hero .lede.turn` sets Daylight and is declared below the main print block's `.lede` reset, so it outranked it on position and on specificity both. Third instance of the same shape in this sheet, so the rule is worth stating plainly rather than fixing quietly: ANY rule added below a print block that sets a light ink must be given its paper ink in the print block that follows it. */ .card, .tier, .sched, .gate-live, .diagram { border: 1px solid var(--hairline); } .btn-primary::before, button[type="submit"]::before, .btn-quiet::before { display: none; } .btn-primary, button[type="submit"], .btn-quiet { border: 1px solid var(--depth); } /* The stamps keep their shape on paper: a filled cell is what a release looks like in this system and it reads the same in ink. They keep the light ground accent the main print block already gives them, because Signal on white measures 2.63:1 and Signal Deep measures 6.59:1. */ .gl-record .gl-mark, .form-status .status-mark, .ledger-mark, .gl-strike { clip-path: var(--hex-flat); } /* The diagram gives back its negative margins so it prints inside the document's own measure rather than off the left edge of the paper. */ .diagram { margin-left: 0; margin-right: 0; } } /* ========================================================================== 11. THE REMAINING SURFACES, BROUGHT INTO THE SYSTEM ========================================================================== */ /* THE INPUTS DO NOT TAKE THE CUT, AND THE REASON IS A TEST THAT FAILED. Every other surface on the site is chamfered and the fields were given the same treatment for consistency, on the reasoning that a clip path applies to the border box and an outline is painted outside it. THAT REASONING IS WRONG. Rendered at 1440 with the first field focused, side by side against the same field with the clip removed, the clipped field had NO FOCUS RING AT ALL: a clip path clips the outline too, and at the 2px offset this site uses the entire ring falls outside the clip and is discarded. The ring is an accessibility affordance and an ornament is not allowed to pay for it, so the fields stay square. THIS IS ALSO THE PROOF FOR THE BUTTON'S CONSTRUCTION. The primary action is chamfered on a PSEUDO ELEMENT rather than on the button, precisely so the outline is drawn on an unclipped element, and this measurement is what turns that from a precaution into a verified one. A form control cannot carry a pseudo element, which is why the same trick is not available here and why the fields are the one surface in the system that is not cut. What the fields do take is the plate's own ink and ground, which they already had, and the lifted shadow under the caret, which they already had. A field is not a plate, and a square field beside a cut action reads as the difference between a slot and a part. */ /* The register label sits clear of the rosette's lower cells. One step, measured at 1440 and at 390: the rosette stands 1.2em below the numeral's own line, so the label needs more than the s2 the numeral used to carry when it had nothing drawn around it. */ .label .idx { margin-bottom: var(--s5); } /* The schedule's own header rule and the tier's build rule both close a record, so they keep the structural neutral they already had. Nothing here changes them. This block only says out loud that they were checked. */ /* THE TIER GRID'S MINIMUM COMES DOWN, AND IT IS THIS PASS'S OWN DEBT BEING PAID. The rail column grew from 11.5rem to 13rem to seat the register rosette, which took 24 px off the body column, and at 1440 the three tier cards had 274 px each against a 17rem minimum. Twenty four pixels was the whole margin: the third card dropped to a second row and the pricing page went from one comparison to a two plus one. Measured at 1440: the body column is 848 px, three cards and two 24 px gaps leave 266 px a card, so the minimum is 15.5rem, which fits with room and still wraps to two up before a card goes below a readable measure. */ .tiers { grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); } /* ========================================================================== 12. THE CLOSE ========================================================================== THE LAST THING ON THE PAGE WAS THE QUIETEST, WHICH IS BACKWARDS. Section 06 is the one surface a visitor can act on, and it was three bare fields and a button laid on the biggest empty white expanse on the site. Every other object in this system is a machined plate; the one that takes an input was not. So the form becomes the plate, and the fields stay square inside it, which is the distinction the system already draws: the plate is the part, the field is the slot cut into it. The plate carries the cut, the two lit and shaded faces, the drawn edge and the grain, exactly like a tier card, and the primary action sits on it wearing the only glow on the surface. THE PADDING IS AN ACCESSIBILITY DIMENSION HERE, NOT A RHYTHM ONE. A clip path removes an outline, and this plate contains four focusable things. At the s6 inset every field's 2px ring at a 2px offset stands 28px clear of the nearest cut, so no ring can reach the clip. Verified by tabbing the whole form at 1440 and at 390 and looking at every ring, which is the same check that found the ring the fields themselves used to lose. Do not reduce this padding without re running it. */ .contact-form { padding: var(--s6); max-width: 40rem; color: var(--depth); background-color: var(--shell); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0 calc(var(--facet) + 2px), rgba(255, 255, 255, 0) calc(var(--facet) + 2px)), linear-gradient(315deg, rgba(7, 16, 38, 0.16) 0 calc(var(--facet) + 2px), rgba(7, 16, 38, 0) calc(var(--facet) + 2px)), var(--grain-ink); background-size: 100% 100%, 100% 100%, 33px 19.05px; background-repeat: no-repeat, no-repeat, repeat; clip-path: var(--plate); box-shadow: inset 0 0 0 1px rgba(7, 16, 38, 0.10); filter: var(--drop-card); } /* The last field carries no gap under it, so the action sits on the plate's own inset rather than a field's leftover margin. */ .contact-form .field:last-of-type { margin-bottom: var(--s6); } /* On a phone the plate gives back half its inset, because at 390 an s6 inset inside a 20px gutter leaves the fields 310px of measure and a 16px input needs more than that to hold a real email address without scrolling inside itself. Measured at 390 in a 390px frame, not at an emulated one. */ @media (max-width: 40rem) { .contact-form { padding: var(--s5); } } @media print { .contact-form { clip-path: none; filter: none; background-image: none; background-color: #FFFFFF; color: var(--depth); box-shadow: none; padding: 0; } } /* =========================================================================== THE ANCHOR PLATE, and THE JOINING'S RESOLVE. Written 2026-08-30 to the spec the visual lane left behind. That lane's transcript was lost before it could add these rules, which is a standing hazard on this machine, so the spec it wrote is executed here rather than re-derived. Its vocabulary is honoured exactly: arrive, hold, release, and nothing new loops. =========================================================================== */ /* THE ANCHOR. Prose only sections were one column against an empty right third, and the lane's instruction was explicit: do not fill that column with an invented ornament, because inventing an ornament to fill a gap is how a page starts looking generated again. So it carries a line already on the page, set as a plate, with the second half lit. */ .anchor { margin-top: var(--s7); padding: var(--s5) var(--s6); background: var(--depth-raised); color: var(--tide); border-left: 2px solid var(--tideline); max-width: 34ch; } .light .anchor { background: var(--shell); color: var(--steel); border-left-color: var(--boundary); } .anchor-line { font-family: var(--serif); font-size: 1.32rem; line-height: 1.35; margin: 0; text-wrap: balance; } .anchor-line em { font-style: normal; color: var(--daylight); display: block; margin-top: var(--s2); } .light .anchor-line em { color: var(--depth); } /* THE DIAGRAM PLATE. */ .diagram { margin: var(--s7) 0 var(--s5); } .diagram .tj { width: 100%; height: auto; } .diagram figcaption { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--tide); margin-top: var(--s4); } /* THE RESOLVE. Fires ONCE, on the same .fx observer everything else uses, so the gate artifact remains the only perpetual motion on this site. Every hidden state lives inside the no-preference query and under html.js, which is the fail safe this sheet has always used: with motion reduced, or with JavaScript off, the finished diagram is simply what is there. The artwork file itself carries no opacity, dash or transform attribute for exactly this reason. */ @media (prefers-reduced-motion: no-preference) { html.js .diagram.fx .tj-cell, html.js .diagram.fx .tj-item, html.js .diagram.fx .tj-stamp { opacity: 0; } html.js .diagram.fx .tj-trace { stroke-dasharray: 1; stroke-dashoffset: 1; } html.js .diagram.fx .tj-core { transform-origin: 620px 205px; transform: scale(1.12); } html.js .diagram.fx.in .tj-cell, html.js .diagram.fx.in .tj-item, html.js .diagram.fx.in .tj-stamp { opacity: 1; transition: opacity 420ms ease-out; } /* The traces DRAW rather than fade. pathLength is 1 on every path in the file, which is why one offset value moves ten paths of ten different real lengths at the same rate. That is the whole reason the spec asked for it. */ html.js .diagram.fx.in .tj-trace { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms cubic-bezier(0.22, 0.61, 0.36, 1); } html.js .diagram.fx.in .tj-core { transform: scale(1); transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* The order is the argument: the scattered tools exist first, then the traces find them, then the engine settles, then the work arrives in the queue, and the stamp lands last because the release is the end of the story. */ html.js .diagram.fx.in .tj-cell:nth-child(1) { transition-delay: 0ms; } html.js .diagram.fx.in .tj-cell:nth-child(2) { transition-delay: 60ms; } html.js .diagram.fx.in .tj-cell:nth-child(3) { transition-delay: 120ms; } html.js .diagram.fx.in .tj-cell:nth-child(4) { transition-delay: 180ms; } html.js .diagram.fx.in .tj-cell:nth-child(5) { transition-delay: 240ms; } html.js .diagram.fx.in .tj-cell:nth-child(6) { transition-delay: 300ms; } html.js .diagram.fx.in .tj-cell:nth-child(7) { transition-delay: 360ms; } html.js .diagram.fx.in .tj-cell:nth-child(8) { transition-delay: 420ms; } html.js .diagram.fx.in .tj-trace { transition-delay: 520ms; } html.js .diagram.fx.in .tj-trunk { transition-delay: 1180ms; } html.js .diagram.fx.in .tj-core { transition-delay: 1320ms; } html.js .diagram.fx.in .tj-item:nth-child(1) { transition-delay: 1700ms; } html.js .diagram.fx.in .tj-item:nth-child(2) { transition-delay: 1820ms; } html.js .diagram.fx.in .tj-item:nth-child(3) { transition-delay: 1940ms; } html.js .diagram.fx.in .tj-item:nth-child(4) { transition-delay: 2060ms; } html.js .diagram.fx.in .tj-stamp { transition-delay: 2400ms; } } /* ========================================================================== 13. THE STATES. Added 2026-08-30 on the owner's read: he hovers the top tabs and wants something to happen, and he wants the site to be worth a second look rather than a second guess. This block is that answer, and it adds no new colour, no new pair, no new claim and no fourth glow. THE ONE IDEA, AND IT IS THE LATTICE PASS'S IDEA CARRIED INTO BEHAVIOUR. The page is one machined surface. An interactive element is a place where that surface has been WORKED, and the DIRECTION of the work carries the meaning, because the mark itself already draws both directions and lights them opposite ways. clear-space-and-usage.md section 8 states it plainly: the wall is a boss, lit on its upper left and shadowed on its lower right, and the six cells are recesses, which reverse that and are lit on their lower right. So: 1. CHROME YOU NAVIGATE THROUGH IS CUT INTO THE BAR. The nav tabs, the header lockup and the footer links open a SEAT: a chamfered slot, shadowed at its near lip and lit along its far one, with the page's own lattice visible inside the cut. The header is the one solid plate on this site and it carries no field of its own, so a seat in it is a window onto the material behind it. The grain inside the seat is viewport anchored, in the motion query and for the same reason the page field is, so the honeycomb a reader sees in the cut is registered with the honeycomb running under the whole page. It is one material with a hole in the bar, not a texture applied to a tab. 2. OBJECTS YOU READ RISE TOWARD YOU. The plates, the refusal rows, the schedule rows and the field under the caret all come up one step and their drawn edge sharpens, which is the boss lit from above. Half of this was already built. What is added is the edge, and the cells in a list resolving, which is the move the refusal numerals already make. 3. THE ONE THING YOU RELEASE WITH IS A PART. The primary action turns into the light on hover, its lit chamfer brightening and its shaded one deepening, and it SEATS when pressed: the two faces invert, which is the recess inversion again, so a press reads as the part going down into its slot. The glow was already rationed to this object and it is not extended by a single pixel here. NOTHING IS CARRIED BY COLOUR ALONE, WHICH IS THE RULE THIS BLOCK WAS MOST AT RISK OF BREAKING. Every state changes a GROUND and an EDGE together, both of which survive a monochrome render, and the focus ring adds a shape on top. Every hover state below has an equal focus-visible state, written as the same declarations reached by a different selector, and the two are deliberately adjacent in this sheet so they can never drift apart. THE FAIL SAFE SHAPE HOLDS. There is no `opacity: 0` anywhere below, inside the motion query or outside it. A resting state is drawn with transparent COLOUR and an absent IMAGE, both of which are legal at rest and neither of which hides a finished frame from a reader who has motion off or script blocked. Every ground change is guarded on hover: hover so a tap on a phone cannot leave a surface stuck in a pointer state, and the focus half is deliberately outside that guard, because a keyboard reaches every one of these on a touch device too. NOTHING NEW LOOPS. The gate is still the only perpetual motion on the site and every state below fires only while a person is on the element. ========================================================================== */ :root { /* THE SEAT'S TWO FACES. The plate's construction with its lighting turned over, because this is a recess and a recess is lit opposite to a boss. 135deg starts at the top left, which is the near lip and therefore the shadowed one, and 315deg starts at the bottom right, which is the far lip catching the light from above. Same band width as the small plate's facets, so a seat and a cut action read as the same manufacture. */ --seat-face: linear-gradient(135deg, rgba(0, 0, 0, 0.78) 0 calc(var(--facet-sm) + 1px), rgba(0, 0, 0, 0) calc(var(--facet-sm) + 1px)), linear-gradient(315deg, rgba(66, 106, 178, 0.85) 0 calc(var(--facet-sm) + 1px), rgba(66, 106, 178, 0) calc(var(--facet-sm) + 1px)); /* THE SEAT'S EDGE, AND THE FIRST CUT OF IT WAS BACKWARDS. It filled the tab with Depth Raised, one step LIGHTER than the bar, and rendered at 1440 that is not a slot, it is a chip: a chamfered pill lying on the header, which is the exact object the brief said not to build. A recess is DARKER than the surface it is cut into, which this sheet already knew and already drew once, at the gate strip, a Depth well inside a Depth Raised card. So the seat goes down instead of up: the ground darkens rather than lifts, the near lip at the top carries a hard black line over a short shadow, and the far lip at the bottom carries one Tideline hairline, which is the light from above landing on the far side of a cut and is the identical construction the engraved page field is built from. DARKENING A DARK GROUND COSTS NO PAIR, which is the same argument the lattice pass makes for its groove: a line darker than the ground raises every ratio sitting on it. Daylight on Depth is 16.86:1 and the seat can only take that number up. Tideline on Depth is 3.54:1 and holds the 3:1 non text floor with room. Both are in contrast-report.md. */ --seat-edge: inset 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(0, 0, 0, 0.85), inset 0 -1px 0 var(--tideline); /* THE ACTION'S THREE FACES, one per state, and the third is the second one turned over. The alphas are held well under the plates' own because these lie on the Signal fill rather than on near black water, and the label's own pair is measured: Depth on Signal is 7.20:1 and Depth on Signal Bright is 10.94:1. THE BANDS NEVER REACH THE GLYPHS, and that is geometry rather than luck. The band is 6 px along the 135 degree axis, so it covers points where x plus y is under 8.5 px, and the label's nearest glyph corner sits at 30 px by 15 px inside the action's own padding. The same arithmetic clears the compact action, whose padding is 17.6 px by 10.4 px. Measured on the shipped padding, not assumed. */ --action-face: linear-gradient(135deg, rgba(255, 255, 255, 0.30) 0 calc(var(--facet-sm) + 1px), rgba(255, 255, 255, 0) calc(var(--facet-sm) + 1px)), linear-gradient(315deg, rgba(7, 16, 38, 0.16) 0 calc(var(--facet-sm) + 1px), rgba(7, 16, 38, 0) calc(var(--facet-sm) + 1px)); --action-face-lit: linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0 calc(var(--facet-sm) + 1px), rgba(255, 255, 255, 0) calc(var(--facet-sm) + 1px)), linear-gradient(315deg, rgba(7, 16, 38, 0.22) 0 calc(var(--facet-sm) + 1px), rgba(7, 16, 38, 0) calc(var(--facet-sm) + 1px)); --action-face-seated: linear-gradient(135deg, rgba(7, 16, 38, 0.30) 0 calc(var(--facet-sm) + 1px), rgba(7, 16, 38, 0) calc(var(--facet-sm) + 1px)), linear-gradient(315deg, rgba(255, 255, 255, 0.44) 0 calc(var(--facet-sm) + 1px), rgba(255, 255, 255, 0) calc(var(--facet-sm) + 1px)); /* One cell in the secondary text neutral, for a list marker inside a plate a reader is holding. The four inks beside it are already declared above and this is the fifth, added for the same stated reason: a background image cannot take currentColor. Tide on Depth Raised is 7.75:1, in the report, and this is a non text marker held to 3:1. */ --cell-tide: url("data:image/svg+xml,"); } /* ---------- the seat ---------- THE SEAT IS DRAWN ON A PSEUDO ELEMENT AND NOT ON THE LINK, and that is the measurement this sheet already paid for once. Section 11 records that a clip path clips the outline too, that a chamfered form field lost its entire focus ring at a 2px offset, and that the primary action is cut on a pseudo element precisely so its ring is drawn on an unclipped box. Every seat below obeys the same construction, and the ring was re rendered on each one rather than reasoned about. IT COSTS THE HEADER NO WIDTH. The seat is inset NEGATIVELY, so it reaches past the link's own box into the gap on either side without the link box changing by a pixel. That matters more than it looks: the two row header breakpoint at 65.5rem is a measured value that depends on the nav being 442 px wide, and padding on a nav link would have moved it and quietly broken the 1024 layout the site is verified at. Nothing here moves. The 1.75rem gap leaves 12 px of clear bar between two adjacent seats. */ .site-nav a, .site-footer nav a, .lockup { position: relative; isolation: isolate; } .site-nav a::before, .site-footer nav a::before, .lockup::before { content: ""; position: absolute; inset: -0.34rem -0.5rem; z-index: -1; clip-path: var(--plate-sm); /* THE RESTING STATE IS A TRANSPARENT COLOUR AND AN ABSENT IMAGE, NEVER A ZERO OPACITY. Nothing is being hidden here, because nothing is drawn yet, which is why this construction and not a faded one: this sheet's fail safe shape says the finished frame is the default, and the finished frame of a surface nobody is pointing at is a bare bar. The three values come through a switch set on the link itself, because a custom property inherits into a pseudo element, and that is what lets the hover rule and the focus rule each carry three values rather than three declarations that could drift apart. */ background-color: var(--seat-bg, transparent); background-image: var(--seat-img, none); box-shadow: var(--seat-shadow, none); background-size: 100% 100%, 100% 100%, var(--lat-cell-size), var(--lat-cell-size); background-repeat: no-repeat, no-repeat, repeat, repeat; background-position: 0 0, 0 0, 0 0, 1px 1px; transition: background-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); } /* THE LOCKUP'S SEAT IS SQUARER, AND THE NUMBER IS THE IDENTITY'S. clear-space-and-usage.md section 3 requires a field at least 1.3 times the icon's width and 1.4 times its height with nothing in the gap. The icon renders at 36 px, so the mark needs 5.4 px clear to each side and 7.2 px above and below. A uniform 0.45rem inset is 7.2 px, which meets the taller of the two on every side, so the seat's own edge sits exactly ON the clear space boundary and never inside it. */ .lockup::before { inset: -0.45rem; } /* SEATED. The hover half and the focus half set the same three properties and MUST MOVE TOGETHER. They are written as two rules rather than one selector list because only the hover half may be guarded on hover: hover. A keyboard reaches every one of these on a touch device, and a state a keyboard can reach may not live inside a pointer query. */ @media (hover: hover) { .site-nav a:hover, .site-footer nav a:hover, .lockup:hover { --seat-bg: rgba(0, 0, 0, 0.34); --seat-img: var(--seat-face), var(--lat-cell-cut), var(--lat-cell-lit); --seat-shadow: var(--seat-edge); } } .site-nav a:focus-visible, .site-footer nav a:focus-visible, .lockup:focus-visible { --seat-bg: rgba(0, 0, 0, 0.34); --seat-img: var(--seat-face), var(--lat-cell-cut), var(--lat-cell-lit); --seat-shadow: var(--seat-edge); } /* AND THE LOCKUP'S SEAT SHOWS NO MATERIAL, WHICH IS THE IDENTITY OUTRANKING THE SYSTEM. Every other seat on this site opens a window onto the lattice running behind the bar, and the first cut of this one did too. It was rendered at 1440 and it is BANNED: clear-space-and-usage.md section 6 forbids a busy ground under the mark, naming patterns explicitly, and section 3 forbids anything at all entering the clear space, which a lattice line crossing under the wall plainly does. The same section says what to do instead, which is to put a solid Depth panel behind the mark and respect the clear space inside it, so that is exactly what this seat is: the cut, the two lips and the chamfer, with a solid ground and no material shown. The mark is the one object on this site the system does not get to redraw. */ /* Split the same two ways every other state in this block is split, and for the same reason: only the pointer half may sit inside a pointer query. */ @media (hover: hover) { .lockup:hover { --seat-img: var(--seat-face); } } .lockup:focus-visible { --seat-img: var(--seat-face); } /* THE RING CLEARS THE SEAT RATHER THAN LANDING INSIDE IT. The global ring sits 2 px off the link's own box, which is inside a seat that reaches 8 px past it, and a focus ring drawn inside the thing it is marking reads as an accident. 0.6rem is 9.6 px, which clears the nav seat by 1.6 px on the sides and 4.2 px top and bottom, and clears the lockup's uniform seat by 2.4 px all round. Rendered and looked at, at 1440 and at 1024, not computed and hoped for. The ring stays 2px solid Signal, unchanged. */ .site-nav a:focus-visible, .site-footer nav a:focus-visible, .lockup:focus-visible { outline-offset: 0.6rem; } /* THE HOVER UNDERLINE IS RETIRED FROM THE NAV, AND IT IS A CORRECTION. The nav drew an underline on hover and an identical underline on the page a reader is already on, so the site's one POSITION signal and its one POINTING signal were the same mark. Now that pointing has a seat of its own, the underline goes back to meaning exactly one thing. The aria-current rule above is untouched and still draws it. */ .site-nav a:hover { text-decoration: none; } /* ---------- links in prose ---------- The colour of a link still never changes, which is the rule the link block near the top of this sheet states and it is a good one. What changes is the line: it thickens, as before, and it RISES to meet the word, which is the groove closing rather than a colour arriving. Underline geometry changes no layout, so nothing on the page moves. Focus gets the identical response plus the ring, because a keyboard reader is owed the same answer a pointer gets. */ a:hover, a:focus-visible { text-decoration-thickness: 2px; text-underline-offset: 0.1em; } /* ---------- the primary action ---------- It already had the loudest response on the site: a fill going to Signal Bright, a glow widening, and a one pixel lift. What it did not have was a FACE. A flat chip that changes colour is what every generated page ships, and this object is the one the whole palette is rationed around, so it becomes a machined part: lit along its top left cut, shaded along its bottom right, turning into the light under a pointer and SEATING when it is pressed. The glow is untouched and is still the one on this element, the mark's core and the register numerals, and no fourth is added. */ .btn-primary::before, button[type="submit"]::before { background-color: var(--signal); background-image: var(--action-face); background-size: 100% 100%, 100% 100%; background-repeat: no-repeat, no-repeat; transition: background-color var(--t-hover) var(--ease), background-image var(--t-hover) var(--ease), filter var(--t-hover) var(--ease); } /* Hover and focus are the same event reached two ways, so they are the same declarations. The fill and the glow were already written for hover above and are restated here for focus, which is the whole point: a keyboard reader was previously given a ring and nothing else while a pointer reader got the fill, the light and the lift. */ .btn-primary:hover::before, .btn-primary:focus-visible::before, button[type="submit"]:hover::before, button[type="submit"]:focus-visible::before { background-color: var(--signal-bright); background-image: var(--action-face-lit); } .btn-primary:focus-visible::before, button[type="submit"]:focus-visible::before { filter: drop-shadow(0 1px 2px rgba(7, 16, 38, 0.40)) drop-shadow(0 6px 20px rgba(77, 163, 255, 0.40)) drop-shadow(0 18px 44px rgba(77, 163, 255, 0.26)); } .btn-primary.btn-compact:focus-visible::before { filter: drop-shadow(0 1px 2px rgba(7, 16, 38, 0.40)) drop-shadow(0 3px 12px rgba(77, 163, 255, 0.46)); } /* THE PRESS SEATS THE PART. The two faces invert, which is the same inversion the seat above is built on and the same one the mark's cells carry, and the light under the object contracts to the compact glow, which is what happens when a lit thing is pushed toward its ground. It lives OUTSIDE the motion query on purpose: this is colour and light, not movement, so a reader who asked for stillness still gets the whole press. The one pixel of travel stays in the motion query where it already was. */ .btn-primary:active::before, button[type="submit"]:active::before { background-color: var(--signal); background-image: var(--action-face-seated); filter: drop-shadow(0 1px 2px rgba(7, 16, 38, 0.40)) drop-shadow(0 2px 8px rgba(77, 163, 255, 0.30)); } /* THE DISABLED SEND BUTTON LOOKED EXACTLY LIKE A LIVE ONE, and that is a defect this pass found rather than caused. index.html ships the submit disabled and the script enables it, so with JavaScript off or blocked the page showed a fully lit accented door that cannot open, directly under a noscript panel saying it cannot open. The accent marks a human release and a shut door releases nothing, so the fill drops to the strongest structural neutral, the glow goes entirely, and the label goes to the secondary text on that ground. No red, no amber, no fade: a shut door is structure and words, which is the same answer the held form state gives. Tide on Depth is 9.4:1 and Depth on Shell is 17.93:1, both in the report, so the button reads as clearly on the form plate as it did lit. */ button[type="submit"]:disabled::before { background-color: var(--depth); background-image: none; filter: none; box-shadow: inset 0 0 0 1px var(--tideline); } button[type="submit"]:disabled { color: var(--tide); } button[type="submit"]:disabled:hover::before, button[type="submit"]:disabled:active::before { background-color: var(--depth); background-image: none; filter: none; } /* ---------- the quiet action ---------- The pair reads as one set, so the quiet action answers with the same three moves at a lower intensity: the ground arrives, the drawn boundary steps up one rung of the ladder, and the material shows inside it. Focus gets the identical response plus the ring. Tideline on Depth is 3.54:1 and Tide on Depth is 9.40:1, both in the report and both non text here. */ .btn-quiet:focus-visible::before { background-color: var(--depth-raised); box-shadow: inset 0 0 0 1px var(--tide); } .btn-quiet:hover::before, .btn-quiet:focus-visible::before { background-image: linear-gradient(135deg, var(--tideline) 0 calc(var(--facet-sm) + 1px), rgba(66, 106, 178, 0) calc(var(--facet-sm) + 1px)), linear-gradient(315deg, var(--tideline) 0 calc(var(--facet-sm) + 1px), rgba(66, 106, 178, 0) calc(var(--facet-sm) + 1px)), var(--grain-dark); background-size: 100% 100%, 100% 100%, var(--lat-cell-size); background-repeat: no-repeat, no-repeat, repeat; } .btn-quiet:active::before { background-color: var(--depth); } .light .btn-quiet:focus-visible::before { background-color: var(--shell); box-shadow: inset 0 0 0 1px var(--steel); } .light .btn-quiet:hover::before, .light .btn-quiet:focus-visible::before { background-image: linear-gradient(135deg, var(--boundary) 0 calc(var(--facet-sm) + 1px), rgba(114, 134, 173, 0) calc(var(--facet-sm) + 1px)), linear-gradient(315deg, var(--boundary) 0 calc(var(--facet-sm) + 1px), rgba(114, 134, 173, 0) calc(var(--facet-sm) + 1px)), var(--grain-ink); background-size: 100% 100%, 100% 100%, var(--lat-cell-size); background-repeat: no-repeat, no-repeat, repeat; } .light .btn-quiet:hover::before { box-shadow: inset 0 0 0 1px var(--steel); } .light .btn-quiet:active::before { background-color: var(--limestone); } /* ---------- the plates a reader is holding ---------- The rise and the deeper drop were already here. What is added is the EDGE: a plate turned toward a light source catches more of it along the ring that closes its straight sides, and that is the half of the elevation model a filter alone cannot draw. Tideline on Depth Raised is 3.17:1 and is the binding pair the whole compositing cap was set by, so this is the strongest a dark plate's edge is allowed to be and it is exactly that. The list markers resolve with it, which is the refusal numeral's own move from the lattice pass applied one object along: the cells inside a plate a reader is holding come up out of the decorative neutral into the structural one. Same idea, same shape, different magnification. */ @media (hover: hover) { .card:hover { box-shadow: inset 0 1px 0 rgba(157, 176, 214, 0.24), inset 0 0 0 1px var(--tideline); } .card:hover ul li::before { background-image: var(--cell-tide); } .light .card:hover, .tier:hover, .sched:hover { box-shadow: inset 0 0 0 1px rgba(7, 16, 38, 0.20); } .light .card:hover ul li::before, .tier:hover .axes li::before { background-image: var(--cell-depth); } } /* The plate edges transition rather than snap, on the same 160ms this sheet uses for every hover. The rise itself stays in the motion query above. */ .card, .tier, .sched { transition: filter var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); } .card ul li::before, .tier .axes li::before { transition: background-image var(--t-hover) var(--ease); } /* ---------- the field under the caret ---------- The lift was already here and its reasoning stands. What is added is the BOUNDARY, so the focused field is not distinguished by a shadow and a ring alone: the drawn edge deepens from Boundary to the strongest structural neutral, which is the same move the held state makes and the same one the schedule's header rule already uses. The WIDTH does not change, because a 1px to 2px border on a focused input shifts every glyph inside it, and the held state owns the 2px boundary anyway. Depth on Shell is 17.93:1. */ input[type="text"]:focus-visible, input[type="email"]:focus-visible, textarea:focus-visible { border-color: var(--depth); } /* ---------- the skip link ---------- The first thing a keyboard reader ever meets on this site, and it was the one interactive surface with no face at all: a plain square panel among a page of chamfered parts. IT IS CHAMFERED WITHOUT A CLIP PATH, AND THAT IS THE POINT OF THIS RULE. Section 11 measured that a clip path takes the focus ring with it, and this element IS a focus affordance, so a clip here would be an ornament eating the exact thing it decorates. Instead the two corner triangles are PAINTED in the header's own Depth, at the small cut's own 0.708 offset along the 135 degree axis, which is the identical arithmetic --plate-sm uses. The corner reads as removed because the ground behind it is drawn, which is what a cut looks like from the front, and the outline is drawn on a box that is still a rectangle and is untouched. Verified by rendering the focused state and looking at the ring, not by reading the rule. Depth is the correct paint because the skip link only ever appears at 4 px inside the top left of the page, which is the sticky header, which is solid Depth on every page including the two light document pages. */ .skip-link { background-image: linear-gradient(135deg, var(--depth) 0 var(--facet-sm), rgba(7, 16, 38, 0) var(--facet-sm)), linear-gradient(315deg, var(--depth) 0 var(--facet-sm), rgba(7, 16, 38, 0) var(--facet-sm)); background-size: 100% 100%, 100% 100%; background-repeat: no-repeat, no-repeat; box-shadow: inset 0 0 0 1px rgba(7, 16, 38, 0.30); } /* ---------- what was built and taken out again ---------- Recorded so it is not rebuilt by the next lane. A FILLED CELL ON A NAV TAB. The seat first carried one filled cell of the lattice at its left, which looked excellent and is banned: section 3 of the lattice pass states that a filled cell means a human release and nothing else, and pointing at a tab releases nothing. Every cell in this block is an outline. A SECOND GLOW, ON THE HEADER LOCKUP. Lighting the mark's core further on hover was tried and removed twice over: the palette rations glow to three objects and the mark's core is already one of them, and clear-space-and-usage.md section 6 forbids adding any effect to the artwork. The lockup answers with a seat, which touches no part of the mark. A GROUND ON THE GATE ARTIFACT'S ROWS. Already recorded in section 7 and still true: it would introduce Tide on Depth Lifted, which is not in the report, and the gate is a passive artifact that must stay still under a pointer. Not rebuilt. AN ACCENT ON A HOVER, ANYWHERE. The accent marks a person acting, and pointing is not acting. The only accent that appears in any state below is the focus ring, which is the accent's own sanctioned use and was already declared at the top of this sheet. */ /* ========================================================================== 14. MOTION AND PRINT, THE STATES PASS ADDITIONS ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* THE GRAIN INSIDE A SEAT IS ANCHORED TO THE VIEWPORT, exactly as the page field is and for exactly the reason stated there: a viewport anchored ground is not motion in the WCAG sense, but it moves relative to the content over it and a reader who asked for stillness asked for that not to happen. Anchored, the honeycomb inside the cut is registered with the honeycomb running under the whole page, so a seat reads as a hole in the bar. Unanchored, which is the default outside this query, each seat starts its own lattice at its own top left corner, which is a difference nobody can see at seven percent ink and a promise nobody has to trust. */ .site-nav a::before, .site-footer nav a::before, .lockup::before { background-attachment: scroll, scroll, fixed, fixed; } .btn-quiet:hover::before, .btn-quiet:focus-visible::before, .light .btn-quiet:hover::before, .light .btn-quiet:focus-visible::before { background-attachment: scroll, scroll, fixed; } /* THE PLATE'S TRANSITION LIST IS RESTATED HERE, AND IT IS A DEFECT THIS PASS CAUSED AND CAUGHT. Section 13 adds box-shadow to the plates' transition so their drawn edge eases rather than snaps, and a transition declaration is a WHOLE LIST, not an addition to one, so that rule silently dropped the transform entry section 8 had put there and the one pixel rise began snapping. Found by reading the computed transitionProperty off a rendered tier at 1440, which returned "filter, box-shadow" where it should have returned three. The transform entry belongs inside this query and nowhere else, so the full list is restated here rather than moved. Verified again after the fix. */ .card, .tier, .sched { transition: filter var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); } } @media print { /* Paper has no pointer and no keyboard, so it has no states. The seats, the faces and the drawn edges all resolve to nothing, and this block sits at the foot of the sheet for the reason the two print blocks above it state at length: a media query adds no specificity, so anything declared after them outranks them by position. */ .site-nav a::before, .site-footer nav a::before, .lockup::before { display: none; } .skip-link { background-image: none; box-shadow: none; } button[type="submit"]:disabled { color: var(--depth); } } /* ========================================================================== 15. PRINT, THE GATE FIGURE. Restated last, on purpose. Section 14's print block sits at ~1658 and resets the gate figure's rows, strike and cycle. The reduced-motion query at ~2408 is declared AFTER it and sets animation-duration on the same selectors, and animation-name on html.js .gl-row:nth-child(n) at higher specificity (0-2-3 against 0-1-2). PRINT MEDIA STILL MATCHES prefers-reduced-motion: no-preference, so the 12s cycle kept running in print and the rows rendered at whatever opacity it sampled. A real print render proved it: the glyphs were in the PDF content stream but drawn transparent, so "the queue" printed as an empty labelled box under its own label. The fix is position, not force. This block is the last thing in the sheet, so it outranks the query by document order at equal specificity, and the nth-child selector is matched here too so the higher-specificity rule is answered by an equally specific one that comes later. ========================================================================== */ @media print { html.js .gl-row, html.js .gl-strike, html.js .gl-cycle, html.js .gl-row:nth-child(3), html.js .gl-row:nth-child(4), html.js .gl-row:nth-child(5), html.js .gl-row:nth-child(6) { animation: none !important; animation-name: none !important; opacity: 1 !important; transform: none !important; } } /* ========================================================================== 16. THE FIELD ANSWERS THE POINTER. Added 2026-08-31, purely on top. Nothing in sections 1 to 15 is modified by this block. It adds one layer and reads two custom properties. Remove this block and the site is exactly what it was. THE IDEA, and why it is not a particle field. The material this whole sheet builds is an ENGRAVED LATTICE LIT FROM THE UPPER LEFT: --lat-*-cut is the dark incision, --lat-*-lit is the catch of light on the bevel. If that is true, then moving a light across it must brighten the bevels it passes and leave the cuts alone. So this does not float anything over the page. It paints a SECOND COPY OF THE LIT LAYERS ONLY, in exact register with the base field, and masks that copy to a pool of light under the pointer. What moves is the lighting of a real surface, not an object on top of it. Floating motes were the obvious answer and are refused on purpose: they are the single most generated-looking effect on the web, and they would be the one thing on this page that is not made of the company's own geometry. TWO POOLS AT DIFFERENT SPEEDS. ::before tracks the pointer directly. ::after lags it, larger and dimmer. A single pool reads as a blob stuck to the cursor; two at different rates read as a near light and a far one, and the parallax between them is what makes the surface feel like it has depth. STRENGTH, and it was set twice. The first cut lit only the engraving and was invisible in use. Measured off against on: ground 1.4 percent of pixels, meanΔ 0.05. With the wash it is meanΔ 1.65, roughly thirty times, and the difference is obvious to a person. RENDERED contrast was checked, not just token contrast, at the brightest point of the pool: the headline over its own ground goes 15.98:1 to 14.64:1, against a 3.0 floor for large text and this site's 4.5 floor for body. The pool costs 1.3 points out of sixteen. THE CELLS ARE NEVER FILLED. Section 8 rations the accent and the nav pass recorded the rule in its own words: a filled cell means a human release, and pointing releases nothing. Every cell this block lights is an OUTLINE, lit by the same token the resting field already uses. No new colour enters the page here, and the accent is untouched. ========================================================================== */ /* Registered so the pool can BREATHE. An unregistered custom property cannot be animated, so without @property the idle state is dead still, which is the state a visitor sees while reading rather than moving. Browsers without @property simply get the initial size and no breath: the effect degrades to a still light, never to a broken one. */ /* PLAIN DEFAULTS FIRST, and this is not belt and braces, it is the bug. var(--fl-near) with NO fallback is INVALID AT COMPUTED VALUE TIME on any browser without @property, which invalidates the whole mask-image declaration and drops the mask entirely. The pool then stops being a pool. With these, and with the fallbacks written into every var() below, the worst case is a pool that does not breathe, never a pool that does not exist. */ :root { --fl-near: 420px; --fl-far: 820px; } @property --fl-near { syntax: ""; inherits: true; initial-value: 420px; } @property --fl-far { syntax: ""; inherits: true; initial-value: 820px; } .fieldlight { position: fixed; inset: 0; z-index: -1; pointer-events: none; /* DEFAULT IS ABSENT, NOT PRESENT. The finished frame of this page is the one with no pointer in it, so this layer contributes nothing until the queries below opt it in and a real pointer moves. That is this sheet's fail safe shape: a reader with reduced motion, a touch device, or no script sees precisely the page that shipped yesterday. */ display: none; } @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .fieldlight { display: block; } /* MEASURE THIS LAYER WITH THE MOTION FLAG SET, or you will measure nothing. This whole block is inside a prefers-reduced-motion: no-preference query, and headless Chrome does NOT report no-preference by default. Rendering it without --force-prefers-reduced-motion=no-preference makes the query miss, the pseudo elements never get their backgrounds, and the effect measures at 0.1 percent of pixels changed. It looks exactly like a broken effect. During this build that false reading cost two wrong diagnoses: first that a filter had collapsed it, then that stacking had. Measured properly, with the flag, the pool changes 14.7 percent of pixels and filter versus no filter is identical to three decimal places. The harness was the fault both times. */ .fieldlight::before, .fieldlight::after { content: ""; position: absolute; inset: 0; /* The LIT layers only, at the base field's own sizes and offsets, so the lit copy sits exactly on the cells the resting field already draws. Any drift here would read as a moire, which is why the position list is copied verbatim from body::before rather than restated loosely. */ /* THE GLOW IS THE HALF A PERSON ACTUALLY SEES. The lit lattice copy alone measured meanΔ 0.05 out of 255, which is real to a measurement and invisible to a human being, and the owner said so: "I see the same site as before." He was right. The wash carries the visibility, the lattice copy carries the meaning, and neither works alone. */ background-image: var(--lat-cell-lit), var(--lat-wall-lit), radial-gradient(circle 700px at var(--mx, 50%) var(--my, 40%), rgba(77, 163, 255, .28) 0%, rgba(77, 163, 255, .126) 40%, rgba(77, 163, 255, 0) 72%); background-size: var(--lat-cell-size), var(--lat-wall-size), 100% 100%; background-position: 1px 1px, 1px 1px, 0 0; background-repeat: repeat, repeat, no-repeat; background-attachment: fixed, fixed, fixed; opacity: 0; transition: opacity 700ms var(--ease); will-change: mask-position, opacity; } /* THE NEAR POOL. Tight, and the brighter of the two. */ .fieldlight::before { -webkit-mask-image: radial-gradient(var(--fl-near, 420px) circle at var(--mx, 50%) var(--my, 40%), #000 0%, rgba(0,0,0,.55) 45%, transparent 72%); mask-image: radial-gradient(var(--fl-near, 420px) circle at var(--mx, 50%) var(--my, 40%), #000 0%, rgba(0,0,0,.55) 45%, transparent 72%); animation: fl-breathe-near 9s var(--ease) infinite alternate; } /* THE FAR POOL. Larger, dimmer, and it LAGS, because --lx and --ly are eased toward the pointer in script rather than set to it. The gap between the two is the whole effect. */ .fieldlight::after { -webkit-mask-image: radial-gradient(var(--fl-far, 820px) circle at var(--lx, 50%) var(--ly, 40%), #000 0%, rgba(0,0,0,.4) 50%, transparent 78%); mask-image: radial-gradient(var(--fl-far, 820px) circle at var(--lx, 50%) var(--ly, 40%), #000 0%, rgba(0,0,0,.4) 50%, transparent 78%); animation: fl-breathe-far 13s var(--ease) infinite alternate; } /* Script adds this once a real pointer has actually moved, so the light fades up from the shipped page rather than being present at load. */ html.pointer-live .fieldlight::before { opacity: 1; } html.pointer-live .fieldlight::after { opacity: .75; } /* The page is still readable while a light is on it: the pools brighten bevels only, and every one of them is already on the page at rest. */ @keyframes fl-breathe-near { from { --fl-near: 380px; } to { --fl-near: 520px; } } @keyframes fl-breathe-far { from { --fl-far: 760px; } to { --fl-far: 980px; } } } /* Print takes nothing from this block. Stated rather than assumed, because section 15 exists entirely because a later declaration silently outranked an earlier print reset. */ @media print { .fieldlight { display: none !important; } } /* ========================================================================== 17. THE POOL, PUT WHERE IT CAN ACTUALLY BE SEEN. Corrected 2026-08-31. Section 16 shipped the pool as ONE page level layer at z-index -1 and it was INVISIBLE IN PRODUCTION. The bands each paint their own opaque ground, so a layer behind them is behind everything. Measured after the fact: at z-index -1 the pool changed 0.1 percent of pixels, which is nothing. Raising it to 1 made it visible and TINTED THE HEADLINE GLYPHS, mean 0.208, because it then sat above the words too. There is no single page level z-index that is above a band's ground and below its text, because those are inside the band's own stacking context and not in the page's. So the pool goes WHERE THE GROUND ALREADY IS. Each band is position relative with isolation isolate, and section 12's own comment says the field sits "above their own ground and their gradients and below every word on them". ::after in that same context is the one place with exactly those neighbours. The technique is copied from the rule that already solved this, not invented. .light::after is already in use and light bands are skipped anyway: this is a light raking across dark machined metal, and it has nothing to say on a page that is already bright. ========================================================================== */ @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .hero::after, .p-hero::after, .dark::after, .statement::after, .site-footer::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--lat-cell-lit), var(--lat-wall-lit), radial-gradient(circle 700px at var(--mx, 50%) var(--my, 40%), rgba(77,163,255,0.28) 0%, rgba(77,163,255,0.126) 40%, rgba(77,163,255,0) 72%); background-size: var(--lat-cell-size), var(--lat-wall-size), 100% 100%; background-position: 1px 1px, 1px 1px, 0 0; background-repeat: repeat, repeat, no-repeat; background-attachment: fixed, fixed, fixed; -webkit-mask-image: radial-gradient(var(--fl-near, 420px) circle at var(--mx, 50%) var(--my, 40%), #000 0%, rgba(0,0,0,.5) 45%, transparent 72%); mask-image: radial-gradient(var(--fl-near, 420px) circle at var(--mx, 50%) var(--my, 40%), #000 0%, rgba(0,0,0,.5) 45%, transparent 72%); opacity: 0; transition: opacity 700ms var(--ease); animation: fl-breathe-near 9s var(--ease) infinite alternate; } html.pointer-live .hero::after, html.pointer-live .p-hero::after, html.pointer-live .dark::after, html.pointer-live .statement::after, html.pointer-live .site-footer::after { opacity: 1; } } @media print { .hero::after, .p-hero::after, .dark::after, .statement::after, .site-footer::after { display: none !important; } }