/* ============================================================================ SIGNATURE LAYER — PROOF ONLY, 2026-08-09 Loaded by index-signature.html on top of styles.css. Nothing here is on the live page. It adds ONE device, not a new visual language: THE PAGE IS THE RECORD. A case-file rail runs down the left margin of every screen — the docket spine of the document you are reading. It carries the file's name set vertically, a progress spine that fills as you descend, the section you are currently in as a live mono readout, and a token that sits on the spine at your position. It makes no data claim. The readout names SECTIONS of this page, never cases or people, and the file line is the page's own title. That is the whole discipline: the site argues that a record should follow a person to a verified result, so the page follows the reader to the end of its own record. Nothing else on the site does this, and nothing else needs to. ========================================================================== */ :root{--sig-w:clamp(46px,4vw,62px)} /* The page shifts right to make the margin; the rail is fixed to it. */ @media (min-width:900px){ body{padding-left:var(--sig-w)} .sig{position:fixed;left:0;top:0;bottom:0;width:var(--sig-w);z-index:60; display:flex;flex-direction:column;align-items:center;justify-content:space-between; padding:18px 0 20px;background:var(--canvas); border-right:1px solid var(--hairline);pointer-events:none} /* the ticker sits above everything, so the rail starts under it */ .sig{top:0} } @media (max-width:899px){.sig{display:none}} /* --- the file name, set vertically -------------------------------------- */ .sig__file{writing-mode:vertical-rl;transform:rotate(180deg); font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.32em; text-transform:uppercase;color:var(--muted);white-space:nowrap} .sig__file b{color:var(--navy);font-weight:700} /* --- the spine ----------------------------------------------------------- */ .sig__spine{position:relative;flex:1 1 auto;width:1px;margin:16px 0;background:var(--hairline)} /* filled portion — height is written by signature.js as --sig-p (0–1) */ .sig__spine::before{content:"";position:absolute;left:0;top:0;width:1px; height:calc(var(--sig-p,0) * 100%); background:linear-gradient(180deg,var(--orange),var(--green)); transition:height 120ms linear} /* the reader's token, riding the spine */ .sig__tok{position:absolute;left:50%;top:calc(var(--sig-p,0) * 100%); width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:2px; background:var(--orange);transform:rotate(45deg); box-shadow:0 0 0 3px var(--canvas),0 0 14px 2px rgba(224,122,47,.5); transition:top 120ms linear} /* tick scale behind the spine, every 11px — the site's own scale device */ .sig__spine::after{content:"";position:absolute;left:-3px;top:0;bottom:0;width:7px; background:repeating-linear-gradient(180deg,rgba(20,35,63,.22) 0 1px,transparent 1px 11px); -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)} /* --- the live readout ---------------------------------------------------- */ /* Vertical text cannot use text-overflow, so the readout is sized to hold the longest authored label outright and fades rather than guillotines if a longer one is ever added. Labels are word-truncated in signature.js. */ .sig__now{writing-mode:vertical-rl;transform:rotate(180deg); font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--navy);white-space:nowrap; max-height:52vh;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent); mask-image:linear-gradient(180deg,#000 88%,transparent)} .sig__now i{font-style:normal;color:var(--orange)} /* the readout re-sets itself when the section changes */ .sig__now.is-swap{opacity:0;transform:rotate(180deg) translateY(-6px); transition:opacity 140ms linear,transform 140ms linear} .sig__now{transition:opacity 260ms var(--ease-enter),transform 260ms var(--ease-enter)} /* --- the seal at the foot ------------------------------------------------ */ .sig__seal{display:grid;place-items:center;width:26px;height:26px;border-radius:50%; border:1px solid var(--hairline); font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.02em; color:var(--muted);background:var(--canvas)} /* it closes when the reader reaches the end of the record */ .sig.is-end .sig__seal{border-color:var(--green);color:#fff;background:var(--green); box-shadow:0 0 0 4px rgba(46,125,91,.14)} @media (prefers-reduced-motion:reduce){ .sig__spine::before,.sig__tok,.sig__now{transition:none} } /* ========================================================================== TICKER FULL BLEED — founder ruling 2026-08-10 The ticker runs edge to edge at the very top; the rail starts BELOW it. Two causes, both fixed here rather than in styles.css: the body inset and the .sig rule are both declared in THIS file, and this file cascades after styles.css, so an appended block there would lose to the rules above. 1. The ticker escapes the body inset with a negative margin equal to the rail width, plus matching width. Scoped to the SAME min-width:900px query that creates the inset, so nothing changes below 900 where the rail is already display:none and the body has no padding. 2. .sig starts at the ticker's bottom edge. --tick-h is the MEASURED computed height (32px group + 1px bottom border = 33px), named so it lives in one place. Stacking at that corner: .nav is z-index 90, .sig is 60 — both measured from a running page — so the ticker already wins. No z-index is set here. ========================================================================== */ :root{--tick-h:33px} @media (min-width:900px){ .ticker{margin-left:calc(-1 * var(--sig-w));width:calc(100% + var(--sig-w))} /* SUPERSEDED 2026-08-10 by the block below: the rail now clears the WHOLE header, not just the ticker. The old `body:has(.ticker) .sig` rule is removed rather than left in place — its specificity (0,2,1) beat the new one, so keeping both would have meant the wrong rule silently winning. */ } /* ========================================================================== RAIL BELOW THE HEADER — founder ruling 2026-08-10 The header runs clean and full width; the rail's top edge is flush with the header's BOTTOM edge, and follows it as the header condenses. Measured from a running page at 1246, not read off the source: ticker 33px .nav__in 98px at rest, 74px with .is-condensed .nav TOTAL 134px at rest, 110px condensed (3px of border/rule) --hdr-h is that total, in one place. The condensed value is restated under the site's own state selector. `body:has()` is required rather than a sibling combinator because .sig precedes
in source order. Transition matches .nav__in's own height transition exactly — 300ms cubic-bezier(.22,1,.36,1) — so the seam moves with the header, not after it. Stacking: .nav 90, .sig 60, both measured. Header already sits above; no z-index is set here. ========================================================================== */ @media (min-width:900px){ :root{--hdr-h:134px} body:has(.nav.is-condensed){--hdr-h:110px} /* about.html builds its own header:
with the nav nested inside it, total 100px MEASURED, and it does NOT condense (no .is-condensed appears on scroll — verified). Its own number, stated last so it wins over the .nav rules above, which its nested .nav would otherwise match. */ body:has(.hdr){--hdr-h:100px} /* bottom:0 is already set, so height follows the top offset and the seal stays inside the viewport in both states. */ body:has(.nav) .sig,body:has(.hdr) .sig{top:var(--hdr-h);transition:top 300ms cubic-bezier(.22,1,.36,1)} /* ------------------------------------------------------------------------ THE HEADER BAND — founder ruling 2026-08-10 The reported symptom is real, the stated cause is not. The rail no longer runs behind the header (it starts at its bottom edge, --hdr-h). What shows as a pale block beside about's dark header is the BODY itself: body carries padding-left:var(--sig-w), so a 50px column of bare cream stands to the left of the header. MEASURED at (10,50) and (10,95): elementFromPoint hits BODY, rgb(251,248,243). No rail pixel is in the header at all. So this fills that column with the header's own ground rather than recolouring the rail. A ::before on .sig, not a new element and not JS. Scoped to about's structure only. index/contact/for-organizations run a LIGHT header (.nav is rgba(251,248,243,0) at rest, var(--canvas) once condensed) over a cream hero — there the column is already the right colour and a dark band would be the bug. No transition: about's header does NOT condense and does NOT change colour on scroll — verified by scrolling, .nav keeps rgba(11,23,41,.95) and never gains .is-condensed. Nothing to lag behind. No rail CONTENT falls on this band — the topmost rail child sits at y=118, the band ends at 100 — so no colour of any rail element changes. ------------------------------------------------------------------------ */ /* Two stops, because about's header is two grounds, not one: the ticker is SOLID rgb(11,23,41) for its top 35px (MEASURED), and .nav below it is rgba(11,23,41,.95) over cream, which composites to rgb(23,34,51) — about 12 levels lighter. A single flat navy-deep band matched the ticker and missed the nav. Same declarations the header itself uses, over the same cream base, so the two composite identically. */ body:has(.hdr){--tick-h:35px} body:has(.hdr) .sig::before{content:"";position:fixed;left:0;top:0; width:var(--sig-w);height:var(--hdr-h);pointer-events:none; background-color:var(--canvas); background-image:linear-gradient(180deg,var(--navy-deep) 0,var(--navy-deep) var(--tick-h),rgba(11,23,41,.95) var(--tick-h),rgba(11,23,41,.95) 100%)} } /* ========================================================================== THE SPINE, SCALED UP appended 2026-08-10 Founder ruling: the measure (the spine, its tick scale and the reader's token) was the smallest thing in the rail — roughly 150px in a 730px rail, because it took `flex:1 1 auto` and the two vertical labels either side of it claimed everything first. It is the one element in the rail that MOVES and the only one that tells the reader where in the record they are, so it is now the rail's dominant element: a floor of 46vh, which is the span the founder marked, and the labels give up the space instead. Nothing new is introduced: same 1px spine, same 11px tick scale, same diamond token, same orange-to-green fill written by signature.js as --sig-p. Only the sizes change, so this block is reversible in one delete. ========================================================================== */ @media (min-width:900px){ /* The labels and the seal are NO LONGER SHRINKABLE. Getting this wrong once cost the rail its readout: with the spine on flex:1 1 auto plus a min-height floor, flex SHRINK became the binding constraint and both labels collapsed to ~26px slivers — their max-heights never even came into play, and the seal was squashed from a 26px circle into an oval. flex:0 0 auto is the fix; the caps below are only a backstop for a short viewport. */ /* THE SEAL AND THE FILE LABEL ARE UNSHRINKABLE; THE READOUT IS THE ONE THING THAT GIVES. Both extremes have now been measured on this rail: with the readout unshrinkable the column overflowed its own fixed box by 16px and pushed the seal below the fold, and with everything shrinkable the readout collapsed to a 26px sliver. So the readout takes flex-shrink and its own fade mask absorbs it (that mask exists for exactly this), while the seal — the record-closes indicator — can never be the thing that yields. */ .sig__file{flex:0 0 auto;min-height:0;overflow:hidden} .sig__now{flex:0 1 auto;min-height:0;overflow:hidden} .sig__seal{flex:0 0 26px;min-height:26px} /* The room for the spine comes from the LABELS' TYPE, not from clipping them: tighter tracking and a hair smaller shortens each vertical run by roughly a third and every word still renders in full. Clipping mid-word was the defect, not the size. */ .sig__file{font-size:9px;letter-spacing:.16em;max-height:none; -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%); mask-image:linear-gradient(180deg,transparent,#000 12%)} .sig__now{font-size:9.5px;letter-spacing:.14em;max-height:none} /* Now the spine can take everything that is left, and the floor is set to what the rail can actually afford at a normal desktop height (~42% of the rail) rather than to a number that forces a crush. */ .sig__spine{flex:1 1 auto;min-height:min(28vh,300px);margin:20px 0} /* The tick scale reads at the new length: same 11px pitch, a wider band and a touch more contrast so the scale is legible rather than a smudge. */ .sig__spine::after{left:-5px;width:11px; background:repeating-linear-gradient(180deg,rgba(20,35,63,.3) 0 1px,transparent 1px 11px)} /* The token — the thing the eye follows. 15px, and it carries a warm halo so it can be found at a glance without changing its colour. */ .sig__tok{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:2px; box-shadow:0 0 0 4px rgba(224,122,47,.16),0 0 16px 2px rgba(224,122,47,.34)} /* The travelled portion reads at 2px so the fill is visible against the longer hairline it now runs down. */ .sig__spine::before{width:2px;left:-.5px} } /* SHORT VIEWPORT. Under 900px of height there is not enough rail for two full vertical label runs AND a long spine. The FILE label goes first: it prints "Operation Iron Gate · Case file", which the header already says two inches away, so it is the only genuinely redundant thing in the rail. The live readout then gets its full natural run (no cap, no mask fade mid-word) and the spine keeps its length. Measured at 540px tall: both labels were being clipped to about half their runs by the old caps. */ @media (min-width:900px) and (max-height:900px){ .sig__file{display:none} .sig__now{max-height:none} } /* Under 700px tall the spine keeps a floor — a smaller one, but a floor. With the file label hidden there is room for it, and zeroing it left the measure SHORTER than before the ruling (104px measured against ~150px originally). The readout above absorbs the difference through its fade. */ @media (min-width:900px) and (max-height:700px){ .sig__spine{min-height:min(24vh,160px);margin:14px 0} } /* Below 560px of height there is not enough rail for a floor at all: the spine drops back to whatever is left, so the seal stays inside the viewport. */ @media (min-width:900px) and (max-height:560px){ .sig__spine{min-height:0;margin:10px 0} } /* ========================================================================== THE RAIL, BROUGHT DOWN FROM THE TOP founder ruling 2026-08-10 Two faults, one cause. The rail was distributed with space-between across the whole viewport, so the spine started hard against the header and ran most of the screen; and on any viewport under 900px tall the name label was display:none, which is why the rail appeared to start with nothing — the spine WAS the top of it. So: the rail now packs from the top, the NAME rides at the head of it, and the spine is a fixed measure (not a greedy flex child) set to the span the founder marked. The seal still sits at the foot. This block is appended and therefore wins over the short-viewport display:none above — it is restated in that query rather than deleted there, so the earlier reasoning stays readable. ========================================================================== */ @media (min-width:900px){ .sig{justify-content:flex-start;padding-top:clamp(58px,8vh,104px)} /* the name is the head of the rail on every height */ .sig__file{display:block;font-size:9.5px;letter-spacing:.2em} /* a measure, not a stretch: top and bottom land where the founder marked */ .sig__spine{flex:0 0 auto;height:clamp(180px,28vh,290px);min-height:0; margin:clamp(18px,3vh,34px) 0} .sig__now{flex:0 1 auto} .sig__seal{margin-top:auto} } @media (min-width:900px) and (max-height:900px){.sig__file{display:block}} @media (min-width:900px) and (max-height:700px){ .sig{padding-top:40px} .sig__spine{height:clamp(120px,22vh,190px);min-height:0;margin:14px 0} } @media (min-width:900px) and (max-height:560px){ .sig__file{display:none} .sig__spine{height:clamp(90px,18vh,140px);min-height:0;margin:10px 0} } /* ========================================================================== THE NAME READS IN FULL, THE READOUT GETS THE ROOM founder ruling 2026-08-10 Reported as "cut the rail down to the line so you can see the words". The spine length was not the cause — MASKS were. Both vertical labels carried a fade mask (a leftover from when they were clipped by a greedy spine) and the readout also carried max-height:52vh. So the rail was rendering "ATHFINDERS FOR HOPE" with its P dissolved and cutting the section title short even with empty rail below it. Fix: no mask and no cap on either label, a slightly tighter run on the name so the whole of it clears the founder's line, and a shorter spine so the readout can spread DOWNWARD into the space the spine used to hold. The readout already re-writes itself to each section's own data-screen-label on scroll (signature.js) — it just had nowhere to print. ========================================================================== */ @media (min-width:900px){ .sig__file{font-size:8.5px;letter-spacing:.14em; -webkit-mask-image:none;mask-image:none} /* Lengthened 2026-08-10 to the founder's second mark: the spine now runs from under the name down to roughly two thirds of the rail, and the readout still has its full run below it. */ .sig__spine{height:clamp(170px,27vh,270px);margin:clamp(14px,2.2vh,24px) 0} /* the live section title: full run, no cap, no fade — it grows downward and the seal below it is the only fixed thing left in the column */ .sig__now{flex:0 0 auto;font-size:10px;letter-spacing:.15em; max-height:none;overflow:visible; -webkit-mask-image:none;mask-image:none} } @media (min-width:900px) and (max-height:760px){ .sig__spine{height:clamp(150px,24vh,220px);margin:12px 0} .sig__file{font-size:8px;letter-spacing:.1em} }