carries it only so a skip link can move focus there, and wrapping the entire page content in a 3px ring is not a useful focus indicator. */ #site-view [tabindex]:not([tabindex="-1"]):focus-visible, #site-view summary:focus-visible { outline: 3px solid var(--bone); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(15, 11, 6, .92); border-radius: 2px; } /* Keyboard users must be able to skip a nav they cannot see the end of. Only rendered when focused, so it costs nothing visually. */ #site-view .skip-link { position: absolute; left: 8px; top: -100px; z-index: 200; padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center; background: var(--ground); color: var(--bone); font: 700 12px/1 Helvetica, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--bone); transition: top .12s ease; } #site-view .skip-link:focus { top: 8px; } @media (prefers-reduced-motion: reduce) { #site-view .skip-link { transition: none; } } /* ── Motion pre-state ────────────────────────────────────────────────────── Elements the motion layer reveals start hidden, but ONLY when the inline head script has confirmed JS is running and the visitor has not asked for reduced motion. Without that gate, a JS failure or a reduced-motion user would be left staring at permanently invisible content. */ .js-motion [data-reveal], .js-motion .facts, .js-motion .placeholder, .js-motion .press-section, .js-motion .work-item, .js-motion .live-track { opacity: 0; } .split-line { overflow: hidden; }