/* ══════════════════════════════════════════════════════════════════════ ZYRN — THE PROOF BAND Its own file rather than a block inside case.css: this is the only piece of the case-study work that the LANDING page needs, and case.css carries two pinned instruments, five vitrine variants and a dependency on Lumina's two typefaces. Loading all of that on index.html to style one card would be a real cost for no benefit. ══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ THE PROOF BAND (index.html, between SYS.03 and SYS.04) The landing page carried no evidence at all until 2026-08-19 — the four lines made a claim and nothing on the page answered "show me". This is the answer, and it is one card rather than a grid because there is one case: a row of three would advertise two that do not exist. The whole card is a single . Its children are spans, not divs, so the markup stays valid inside an anchor. One `data-reveal` on the anchor and none inside it — a nested reveal never fires (CLAUDE.md). ══════════════════════════════════════════════════════════════════════ */ /* FOUR cards, two by two. v1 was one card laid out horizontally (shot beside body); at a third of the width that arrangement gives the copy about a dozen characters a line, so the cards stack their own contents instead. v2 was a three-column row. Four across does not work at this container width — a quarter of 1180px is 270px, which is narrower than the third that was already too narrow to lay a card out sideways in. So the band is a 2x2 block: each card keeps roughly the width three had, and the row simply goes down instead of along. Still an explicit column count, never `auto-fit`: auto-fit drops a track somewhere around 1000px on its own schedule and orphans whatever is left over at half width with a hole beside it. Below 1040 these go to a single column and lay out horizontally — see the media queries. */ .proof__row{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,28px); margin-top:clamp(26px,4vh,44px); } /* The card is an
as of 2026-08-30, not an . `.proof__go` is the real link and stretches itself over the whole card, so the card is still one hit target — and the visit tab can be a second, genuine link inside it, which a nested anchor could never have been. */ .proof__card{ position:relative; display:flex;flex-direction:column; padding:clamp(14px,1.6vw,20px); border:1px solid var(--hair); background:rgba(14,15,18,0.6); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); transition:border-color 320ms var(--ease-reveal,cubic-bezier(.16,1,.3,1)), transform 420ms var(--ease-reveal,cubic-bezier(.16,1,.3,1)), background 320ms ease; } @media (hover:hover) and (pointer:fine){ .proof__card:hover{ border-color:var(--hair-strong); background:rgba(14,15,18,0.72); transform:translateY(-3px); } .proof__card:hover .proof__vis img, .proof__card:hover .proof__vid{transform:scale(1.04)} .proof__card:hover .proof__go .arrow{transform:translateX(5px)} .proof__card:hover .proof__go{color:var(--vapor)} /* Duk's rings spin up on hover, and the question it is holding surfaces. One custom property does both — the mark reads `--spin` in its own animation durations, so the card never has to know how the mark works. */ .proof__card--duk:hover .dukmark{--spin:2.6} .proof__card--duk:hover .dukfield__q{opacity:0.9;transform:none;letter-spacing:0.42em} .proof__card--duk:hover .dukfield::after{opacity:0.5;transform:scale(1)} /* Axes answers the same way, through the same one property — except for the entity itself, which is a canvas and cannot be driven by a custom property: axent.js takes the pointer off the card directly and doubles its own clock. */ .proof__card--axes:hover .axfield{--spin:3} .proof__card--axes:hover .axfield__q{opacity:0.9;transform:none;letter-spacing:0.42em} } /* the outline follows the link, and is drawn on the card it covers */ .proof__card:focus-within{outline:2px solid var(--vapor);outline-offset:3px} .proof__go:focus-visible{outline:none} /* ...except for the visit tab, which is its own control and keeps its own */ .proof__card:focus-within:has(.visit:focus-visible){outline:none} .proof__vis{ position:relative; display:block;overflow:hidden;border-radius:4px; border:1px solid var(--hair);background:#05070B; margin-bottom:clamp(14px,1.8vh,20px); } .proof__vis img, .proof__vid{ display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover; transition:transform 620ms var(--ease-reveal,cubic-bezier(.16,1,.3,1)); } /* The card is one hit target and a