/* ========================================================================== base.css — shared reset + structural rules that apply in BOTH eras. Era-specific look and feel lives in 1993.css and 2026.css. ========================================================================== */ * , *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; min-height: 100vh; } img, svg { max-width: 100%; display: block; } a { cursor: pointer; } button { font: inherit; cursor: pointer; } /* Elements that only exist for one era are toggled with these utility classes — .v93 shows in the 1993 era, .v26 shows in the 2026 era. */ body.era-1993 .v26 { display: none !important; } body.era-2026 .v93 { display: none !important; } /* Elements that are wholly specific to one era's markup/behaviour */ body.era-1993 .modern-only, body.era-2026 .retro-only { display: none !important; } /* Skip-link / accessibility helper, invisible until focused */ .skip-link { position: absolute; left: -9999px; top: 0; background: #000; color: #fff; padding: 8px 12px; z-index: 9999; } .skip-link:focus { left: 8px; top: 8px; } /* The 3-second morph is orchestrated by transition.js toggling this class on . Both stylesheets are loaded simultaneously; this class window is where a handful of cross-fade / catalyst rules apply. */ body.era-transition * { transition-duration: 900ms !important; } /* Contact honeypot: invisible to people and assistive technology, filled only by bots */ .hp-field{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}