/* ============================================================================ Proof — design system Technical instrument-panel aesthetic. Monospace, light ground, hairline rules, canvas scenes behind copy. Tokens and hero primitives inherit from the woven-bundles hero; everything below .ui is new surface for content pages. ========================================================================== */ :root{ /* ground + ink */ --bg:#fafbfc; --bg2:#f4f6f8; --bg3:#f1f4f7; --panel:#ffffff; --line:#d8dee5; --line-soft:#e6ebf0; --ink:#14181d; --ink2:#333c47; --dim:#5a6572; --dim2:#5f6875; --faint:#68727f; /* accents */ --cyan:#0e9db8; --amber:#c77d1f; --red:#e03e3e; --violet:#7c5cd6; /* AA-safe variants for anything that carries text */ --link:#0a7285; --amber-ink:#8f5a12; --red-ink:#c02626; --violet-ink:#6b4cc4; --green:#186e4c; /* type */ --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* rhythm */ --gut:clamp(20px,5vw,80px); --maxw:1180px; --prose:66ch; } *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} html,body{margin:0;padding:0;color:var(--ink);font-family:var(--mono); -webkit-font-smoothing:antialiased;} body{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 60%,var(--bg3) 100%); overflow-x:hidden;max-width:100vw;} ::selection{background:rgba(124,92,214,.22);} img,svg,canvas{max-width:100%;} a{color:var(--link);text-decoration:none;border-bottom:1px solid rgba(10,114,133,.4);} a:hover{border-bottom-color:var(--link);} code,kbd{font-family:var(--mono);font-size:.92em;overflow-wrap:break-word;background:rgba(20,24,29,.05); border:1px solid var(--line-soft);border-radius:2px;padding:1px 5px;} /* keyboard focus — visible on every interactive element */ :focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:2px;} /* skip link */ .skip{position:absolute;left:-9999px;top:0;z-index:50;background:var(--ink); color:var(--bg);padding:10px 16px;font-size:11px;letter-spacing:.16em;} .skip:focus{left:8px;top:8px;} /* ---------------------------------------------------------------- chapters */ section.ch{position:relative;overflow:hidden;min-height:640px;height:100vh;} canvas.sc{position:absolute;inset:0;width:100%;height:100%;display:block; z-index:0;pointer-events:none;} .blk{position:absolute;z-index:1;} .hero-copy{left:6%;top:15%;max-width:min(600px,46vw);} .kicker{font-size:10px;letter-spacing:.30em;color:var(--dim); text-transform:uppercase;margin-bottom:18px;} .kicker b{font-weight:400;color:var(--violet-ink);} h1{margin:0;font-weight:700;letter-spacing:-1px;color:var(--ink); font-size:clamp(26px,3.1vw,44px);line-height:1.18;} .vio{color:var(--violet-ink);} .cy{color:var(--link);} .am{color:var(--amber-ink);} .doth1 span{display:inline-block;white-space:nowrap;opacity:1; transition:opacity .55s ease;} /* the engine adds .scene-active to only once it is actually animating, so the headline is readable with no JS, a failed fetch, or a dead canvas */ html.scene-active .doth1 span{opacity:0;} html.scene-active .doth1.settled span{opacity:1;} .lede{font-size:13px;line-height:1.72;color:var(--ink2);margin:20px 0 0;max-width:450px;} .lede b{color:var(--ink);font-weight:600;} /* hero call-to-action pair */ .cap{display:flex;flex-wrap:wrap;gap:10px;width:min(460px,86vw);margin-top:30px;} .cap .btn{flex:0 0 auto;} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;} .chip{font-size:9.5px;letter-spacing:.18em;color:var(--ink2);font-weight:600; border:1px solid #c3ccd5;padding:6px 11px;border-radius:2px; background:#fff;box-shadow:0 1px 4px rgba(20,24,29,.08);} .chip.cy{color:var(--link);border-color:rgba(14,157,184,.45);} .chip.am{color:var(--amber-ink);border-color:rgba(199,125,31,.4);} .chip.vi{color:var(--violet-ink);border-color:rgba(124,92,214,.4);} /* buttons */ .btn{display:inline-block;font:inherit;font-size:10.5px;letter-spacing:.20em; cursor:pointer;color:#fafbfc;background:var(--ink);border:1px solid var(--ink); padding:13px 22px;white-space:nowrap;text-transform:uppercase; box-shadow:0 2px 10px rgba(20,24,29,.18);border-radius:2px;} .btn:hover{background:#000;} .btn.ghost{color:var(--ink);background:transparent;border-color:#c3ccd5; box-shadow:none;} .btn.ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.6);} /* ------------------------------------------------------------- fixed chrome */ .ui{position:absolute;z-index:5;pointer-events:none;color:var(--dim);} /* #mark is the only persistent mark; everything else belongs to the hero and scrolls away with it, so it can never overlap a section below. */ #mark{position:fixed;} /* chrome sits below the nav bar so the two never collide */ #crumb{top:74px;left:28px;font-size:10px;letter-spacing:.30em;color:var(--dim2);} #crumb b{font-weight:400;color:var(--ink2);} #status{top:74px;right:56px;font-size:10px;letter-spacing:.24em;color:var(--dim); text-align:right;white-space:pre;} #status.warn{color:var(--amber-ink);} #status.fault{color:var(--red-ink);} #status.ok{color:var(--link);} #status.intent{color:var(--violet-ink);} #hint{left:28px;bottom:22px;font-size:10px;letter-spacing:.24em;color:var(--dim);} #mark{right:28px;bottom:20px;font-size:12px;letter-spacing:.30em;color:var(--dim);} :where(#mark){padding:6px 10px;border-radius:2px; background:linear-gradient(90deg,rgba(250,251,252,0),rgba(250,251,252,.85) 30%);} #mark .sq{display:inline-block;width:6px;height:6px;background:var(--cyan); margin-right:9px;vertical-align:1px;box-shadow:0 0 6px rgba(14,157,184,.4);} #fps{top:96px;right:56px;font-size:10px;letter-spacing:.2em;color:var(--cyan);display:none;} html:not(.has-scene) #crumb, html:not(.has-scene) #status, html:not(.has-scene) #hint, html:not(.has-scene) #fps{display:none;} /* the nav wraps to two lines below ~1100px and would land on the chrome row */ @media (max-width:1100px){ #crumb,#status,#fps{display:none;} } html:not(.has-scene) #grain{opacity:.32;} /* atmospherics sit BEHIND content: as an overlay they pushed 10px labels under AA */ #toplight{position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(ellipse 90% 55% at 50% -12%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%);} /* Grain history, so this does not get "fixed" a third time: it began as a viewport-fixed overlay (visible through the transparent hero, hidden behind the opaque bands, hard step at the hero's end), then moved onto .sec and .ch (which left the nav and footer untextured, hard step at the nav's base). It now lives on the page itself, scrolling with content, so no element boundary can reveal it. */ #grain{display:none;} html.has-grain body{ background-image:var(--grain), linear-gradient(180deg,var(--bg) 0%,var(--bg2) 60%,var(--bg3) 100%); background-repeat:repeat,no-repeat; background-blend-mode:multiply,normal; background-attachment:scroll,scroll;} #spine{position:absolute;left:var(--gut);top:0;height:100vh;width:1px;z-index:1; background:linear-gradient(180deg,rgba(124,92,214,0),rgba(124,92,214,.16) 18%, rgba(124,92,214,.16) 76%,rgba(124,92,214,0));pointer-events:none;overflow:hidden;} html:not(.has-scene) #spine{display:none;} #spine i{position:absolute;left:-1.5px;width:4px;height:90px;border-radius:2px; background:linear-gradient(180deg,rgba(124,92,214,0),rgba(124,92,214,.8),rgba(124,92,214,0)); animation:spinefall 9s cubic-bezier(.45,0,.55,1) infinite;} @keyframes spinefall{0%{top:-12%}100%{top:108%}} /* ------------------------------------------------------------------- header */ .nav{position:relative;z-index:6;display:flex;align-items:center;gap:24px; justify-content:space-between;padding:22px var(--gut);flex-wrap:wrap;} .brand{display:flex;flex-direction:column;line-height:1.25;border-bottom:0;} .brand strong{font-size:13px;letter-spacing:.22em;color:var(--ink);} .brand span{font-size:9px;letter-spacing:.20em;color:var(--dim2);} .nav-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;} .nav-links a{font-size:10px;letter-spacing:.20em;text-transform:uppercase; color:var(--dim);border-bottom:0;} .nav-links a:hover{color:var(--ink);} .nav-links a[aria-current="page"]{color:var(--ink); border-bottom:1px solid var(--cyan);} .nav-cta{border:1px solid var(--ink)!important;padding:9px 15px;color:var(--ink)!important; border-radius:2px;} .nav-cta:hover{background:var(--ink);color:var(--bg)!important;} /* -------------------------------------------------------------- page shells */ main{position:relative;z-index:2;} /* content bands are opaque: the fixed grain must not show through them, or the first band edge reads as a hard seam across the page */ .sec{background:transparent;} .sec.alt{background:transparent; border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);} section.ch{background:transparent;} .sec{position:relative;padding:clamp(56px,8vw,110px) var(--gut);} .sec.alt{background:transparent; border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);} .sec-inner{max-width:var(--maxw);margin:0 auto;} .sec-inner.narrow{max-width:820px;} .sec-kicker{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase; color:var(--violet-ink);margin-bottom:14px;} h2{margin:0 0 16px;font-size:clamp(20px,2.2vw,30px);line-height:1.28; letter-spacing:-.3px;font-weight:700;} h3{margin:26px 0 10px;font-size:14px;letter-spacing:.02em;font-weight:700;} p{font-size:13px;line-height:1.75;color:var(--ink2);margin:0 0 14px;max-width:var(--prose); overflow-wrap:break-word;} .sec-lead{font-size:14.5px;line-height:1.7;color:var(--ink);max-width:var(--prose);} .fig-note{font-size:10.5px;letter-spacing:.06em;color:var(--dim);line-height:1.6;} .split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px); align-items:start;} .grid{display:grid;gap:18px;} .grid.two{grid-template-columns:repeat(2,minmax(0,1fr));} .grid.three{grid-template-columns:repeat(3,minmax(0,1fr));} ul,ol{font-size:13px;line-height:1.75;color:var(--ink2);padding-left:20px; max-width:var(--prose);} li{margin:0 0 8px;} ul.bare{list-style:none;padding-left:0;} ul.bare li{padding-left:16px;position:relative;} ul.bare li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px; background:var(--cyan);} /* ------------------------------------------------------------------- panels */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:3px; padding:20px 22px;box-shadow:0 1px 4px rgba(20,24,29,.05);} .panel + .panel{margin-top:16px;} .panel-title{font-size:10px;letter-spacing:.24em;text-transform:uppercase; color:var(--dim);margin:0 0 14px;} .card{background:var(--panel);border:1px solid var(--line);border-left-width:3px; border-radius:3px;padding:18px 20px;box-shadow:0 1px 4px rgba(20,24,29,.05);} .card .meta{font-size:9.5px;letter-spacing:.20em;text-transform:uppercase; color:var(--dim);margin-bottom:10px;} .card strong{display:block;font-size:13.5px;line-height:1.5;color:var(--ink); margin-bottom:8px;} .card p{font-size:12.5px;margin:0;} .card.red{border-left-color:var(--red);} .card.cyan{border-left-color:var(--cyan);} .card.amber{border-left-color:var(--amber);} .card.violet{border-left-color:var(--violet);} .callout{border:1px solid rgba(14,157,184,.35);background:rgba(14,157,184,.05); border-left:3px solid var(--cyan);border-radius:3px;padding:16px 18px;} .callout p:last-child{margin-bottom:0;} .callout.warn{border-color:rgba(199,125,31,.35);background:rgba(199,125,31,.05); border-left-color:var(--amber);} /* definition rows — the workhorse for evidence, terms, and specs */ .rows{border-top:1px solid var(--line);margin-top:18px;} .row{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:18px; padding:13px 0;border-bottom:1px solid var(--line-soft);align-items:start;} .row-k{font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--dim);padding-top:2px;} .row-v{font-size:12.5px;line-height:1.7;color:var(--ink2);margin:0;max-width:none;} .row-v code{white-space:nowrap;} /* wide tables scroll inside their own container, never the page */ .tbl-scroll{overflow-x:auto;margin-top:18px; -webkit-overflow-scrolling:touch;} table{border-collapse:collapse;width:100%;min-width:520px;font-size:12.5px;} th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft); vertical-align:top;line-height:1.65;color:var(--ink2);} th{font-size:9.5px;letter-spacing:.20em;text-transform:uppercase;color:var(--dim); background:rgba(20,24,29,.03);font-weight:600;white-space:nowrap;} td strong{color:var(--ink);} /* terminal / code blocks */ .term{background:#101418;border:1px solid #202832;border-radius:3px; padding:16px 18px;overflow-x:auto;box-shadow:0 2px 12px rgba(20,24,29,.14);} .term pre{margin:0;font-size:11.5px;line-height:1.7;color:#cfd8e3; font-family:var(--mono);} /* .lnk: the compact terminal used inline in the verification-chain cards */ .term.lnk{padding:10px 12px;} .term.lnk pre{font-size:10.5px;line-height:1.6;} .term .c{color:var(--cyan);} .term .a{color:var(--amber);} .term .r{color:#ff6b6b;} .term .g{color:#5ad19b;} .term .d{color:#8b96a4;} /* ---------------------------------------------------------------- lead form */ .lead-form{margin-top:22px;max-width:640px;} .lead-form .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;} .lead-form .full{grid-column:1/-1;} .lead-form label{display:block;font-size:9.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--dim);margin-bottom:6px;} .lead-form input,.lead-form select,.lead-form textarea{ width:100%;font:inherit;font-size:12.5px;color:var(--ink); background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:2px; padding:11px 13px;caret-color:var(--cyan);} /* only suppress the ring for pointer focus; keyboard focus must stay visible */ .lead-form input:not(:focus-visible),.lead-form select:not(:focus-visible), .lead-form textarea:not(:focus-visible){outline:0;} .lead-form textarea{min-height:96px;resize:vertical;} .lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{ border-color:rgba(14,157,184,.6);} .lead-form input::placeholder,.lead-form textarea::placeholder{color:var(--faint);} .lead-form .actions{display:flex;align-items:center;gap:16px;margin-top:18px; flex-wrap:wrap;} [data-form-note]{font-size:11px;letter-spacing:.05em;color:var(--dim);margin:0;} [data-form-note].ok{color:var(--green);} [data-form-note].err{color:var(--red-ink);} /* ------------------------------------------------------------------- footer */ .site-footer{position:relative;z-index:7;border-top:1px solid var(--line); padding:26px var(--gut) 34px;background:var(--bg);} /* the footer is opaque and above the mark, so the mark can never cut into a link */ .footer-inner{max-width:var(--maxw);margin:0 auto;display:flex; justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;} .site-footer span{font-size:10px;letter-spacing:.16em;color:var(--dim);} .footer-links{display:flex;gap:16px;flex-wrap:wrap;} .footer-links a{font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--dim);border-bottom:0;} .footer-links a:hover{color:var(--ink);} /* --------------------------------------------------------------------- 404 */ .err-wrap{max-width:680px;margin:0 auto;padding:clamp(70px,14vh,150px) var(--gut); text-align:left;} .err-code{font-size:11px;letter-spacing:.32em;color:var(--red-ink);margin-bottom:18px;} /* -------------------------------------------------- narrow-viewport bleed Monospace copy carries long unbreakable tokens (identifiers, paths, URLs). Grid and flex children default to min-width:auto, so one long token can push a card wider than the viewport. Pin the floor and let tokens break. */ .grid > *, .split > *, .rows, .row, .panel, .card, .callout{min-width:0;} .card strong, .card p, .card .meta, .sec-lead, .lede, li, .row-v, .fig-note, .panel p, .callout p, dd, td, th{ overflow-wrap:anywhere;} .term, .tbl-scroll{max-width:100%;} /* -------------------------------------------------------------- responsive */ @media (max-width:980px){ .split{grid-template-columns:1fr;} .grid.three{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:820px){ /* the decorative chrome has nowhere to live on a phone; the nav already carries the wayfinding, so hide it rather than let it collide */ #status,#spine,#crumb,#hint{display:none;} #fps{display:none!important;} #mark{right:16px;bottom:14px;font-size:10px;} /* the hero stops being a viewport-height stage and becomes a normal block */ section.ch{height:auto;min-height:0;overflow:hidden;} .blk.hero-copy{position:relative;left:auto;right:auto;top:auto;bottom:auto; max-width:none;padding:6vh var(--gut) 7vh;} canvas.sc{opacity:.42;} /* the dot headline must be allowed to wrap or it overflows the viewport */ .doth1 span{white-space:normal;display:inline;} h1{font-size:clamp(22px,7.2vw,32px);letter-spacing:-.5px;} .lede{max-width:none;} .cap{width:100%;} .cap .btn{flex:1 1 auto;text-align:center;} } @media (max-width:640px){ .grid.two,.grid.three{grid-template-columns:1fr;} .row{grid-template-columns:1fr;gap:4px;} .lead-form .fields{grid-template-columns:1fr;} .nav{gap:14px;padding:16px var(--gut);} .nav-links{gap:12px;} .nav-links a{font-size:9.5px;letter-spacing:.14em;} } @media (prefers-reduced-motion: reduce){ #spine i{animation:none;} .doth1 span{transition:none;opacity:1;} *{scroll-behavior:auto!important;} } /* ============================================================================ BROKEN GRID — the editorial layer The centered column is the safe answer and it makes an audit firm look like a consultancy template. Everything below deliberately breaks it: asymmetric twelve-column placement, figures that bleed past the viewport edge, sections that overlap their neighbours, marginalia in the gutter, and oversized section numerals set vertically. Nothing here may gate content or cause body scroll. ========================================================================== */ /* the working grid: twelve columns, generous gutter, nothing centered by default */ .g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(14px,1.6vw,28px);max-width:1560px;margin:0 auto;} /* column placement helpers, used to throw content off-axis */ .c1-5{grid-column:1/6} .c1-6{grid-column:1/7} .c1-7{grid-column:1/8} .c2-7{grid-column:2/8} .c2-8{grid-column:2/9} .c3-8{grid-column:3/9} .c4-10{grid-column:4/11} .c5-13{grid-column:5/13} .c6-13{grid-column:6/13} .c7-13{grid-column:7/13} .c8-13{grid-column:8/13} .c1-13{grid-column:1/13} @media (max-width:900px){ .g12 > *{grid-column:1/13!important;} } /* figures escape the container and run off the edge of the screen */ .bleed-r{margin-right:calc(-1 * var(--gut));max-width:none;} .bleed-l{margin-left:calc(-1 * var(--gut));max-width:none;} .bleed-full{margin-inline:calc(-1 * var(--gut));max-width:none;} @media (max-width:900px){ .bleed-r,.bleed-l,.bleed-full{margin-inline:0;} } /* a band that pulls up into the one above it, so the seam stops being a rule */ .overlap-up{margin-top:calc(-1 * clamp(30px,5vw,90px));position:relative;z-index:3;} .overlap-dn{margin-bottom:calc(-1 * clamp(30px,5vw,90px));position:relative;z-index:3;} /* diagonal seam instead of a hairline */ .band-diag{position:relative;} .band-diag::before{content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(28px,4vw,70px); background:inherit;clip-path:polygon(0 100%,100% 0,100% 100%);pointer-events:none;} /* oversized vertical section numeral, set in the gutter */ .numeral{position:absolute;left:4px;top:0; writing-mode:vertical-rl;font-size:clamp(46px,7vw,120px);font-weight:700; line-height:.86;letter-spacing:-.04em;color:transparent; -webkit-text-stroke:1px rgba(90,101,114,.22); user-select:none;pointer-events:none;} @media (max-width:1100px){ .numeral{display:none;} } @media (min-width:1700px){ .sec-inner > .numeral{left:calc(-1 * clamp(10px,2.6vw,58px));} } /* marginalia: a mono aside rotated into the gutter */ /* Marginalia sits INSIDE the padding by default. Pushing it into negative space only works when the container is actually narrower than the viewport, and it is attached to .sec (full width incl. padding) on several pages, where a negative right offset escaped the viewport and forced 43px of body scroll. */ .marg{position:absolute;right:6px;top:0; writing-mode:vertical-rl;font-size:9.5px;letter-spacing:.24em; text-transform:uppercase;color:var(--dim);max-height:94%;overflow:hidden; /* if it must clip, fade rather than guillotine a word in half */ -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent); mask-image:linear-gradient(to bottom,#000 82%,transparent);} @media (max-width:1200px){ .marg{display:none;} } /* Only hang outward when the parent is the INNER container, which is narrower than the viewport. Attached straight to .sec (full width incl. padding) a negative offset always escapes, whatever the breakpoint. */ @media (min-width:1700px){ .sec-inner > .marg{right:calc(-1 * clamp(8px,2vw,48px));} } /* horizontal filmstrip: scrolls inside itself, never the page */ .strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity; padding-bottom:14px;-webkit-overflow-scrolling:touch;} .strip > *{flex:0 0 clamp(240px,26vw,330px);scroll-snap-align:start;} .strip::-webkit-scrollbar{height:6px} .strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} /* a figure that holds while its copy scrolls past */ .pin{position:sticky;top:88px;} @media (max-width:900px){ .pin{position:static;} } /* rules that cut across a band at an angle, purely graphic */ .hair-x{position:absolute;inset:0;pointer-events:none;overflow:hidden;} .hair-x i{position:absolute;left:-10%;right:-10%;height:1px; background:linear-gradient(90deg,transparent,rgba(90,101,114,.16),transparent); transform-origin:0 0;} /* a section with its own local relative frame, so numerals and marginalia anchor */ .sec{position:relative;} .sec-inner{position:relative;} /* canvas figures on inner pages: sized by the layout, drawn by figures.js */ .fig-c{display:block;width:100%;height:clamp(160px,22vw,300px);} .fig-wrap{position:relative;border:1px solid var(--line);border-radius:3px; background:linear-gradient(180deg,#fff,#f7f9fb);overflow:hidden;} .fig-wrap .fig-cap{position:absolute;left:12px;bottom:9px;font-size:9.5px; letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}