/* ========================================================================== Mashman Investments -- site.css Design system: shared Mashman-family palette + typography, per canonical- facts.json designSystem. Two grounds only (white / ink). Platinum is the only accent. Zero border-radius. Hairline rules, not shadows. ========================================================================== */ :root { --ink: #0A0A0A; --platinum: #C8C5BE; --steel: #8E8B84; --graphite: #86837C; --slate: #6E6B66; --panel: #131316; --panel-deep: #0E0E11; --rule-dark: #26262A; --rule-light: #DDD8CE; --ink-body: #3E3E3E; --ink-label: #5C584E; --white: #FFFFFF; --font-display: "Montserrat", sans-serif; --font-body: "Inter", sans-serif; --measure: 65ch; } /* ------------------------------------------------------------------------- Reset / base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--white); color: var(--ink-body); font-family: var(--font-body); font-weight: 400; line-height: 1.8; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.5em; font-weight: 700; } p { max-width: var(--measure); margin: 0 0 1.4em; } .no-max { max-width: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--white); padding: 0.75em 1.25em; z-index: 1000; font-family: var(--font-body); font-size: 0.9rem; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .on-dark :focus-visible { outline-color: var(--white); } /* ------------------------------------------------------------------------- Layout primitives ------------------------------------------------------------------------- */ .container { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); } section { padding: clamp(2.5rem, 6vw, 5rem) 0; } /* Scroll-reveal: sections fade/slide up into place as they enter the viewport. Safe by construction: the reveal class is only meaningful once JS confirms it's running (adds .js to and observes), a