/* Boring Web Designs — monochrome retune of the Modernist tokens. Modernist supplies the structure (Archivo, 0px radius, 2px rules, flush-left, grayscale imagery). This file removes the red: the accent role becomes ink, so every Modernist component (.btn-primary, focus rings, ::selection) renders in strict black and white without any component being restyled by hand. */ @import url('./assets/fonts/fonts.css'); :root { --color-bg: #FFFFFF; --color-surface: #F4F3EF; --color-text: #0A0A0A; --color-accent: #0A0A0A; --color-accent-2: #0A0A0A; --color-divider: #0A0A0A; --ink: #0A0A0A; --char: #171717; --dark: #292929; --mid: #777777; --muted: #666666; --line: #D8D8D8; --paper: #F4F3EF; --color-accent-100: #F4F3EF; --color-accent-200: #D8D8D8; --color-accent-300: #B4B4B4; --color-accent-400: #777777; --color-accent-500: #292929; --color-accent-600: #171717; --color-accent-700: #0A0A0A; --color-accent-800: #000000; --color-accent-900: #000000; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --gut: clamp(20px, 4.4vw, 68px); /* Vertical rhythm: sections breathe. One scale, used everywhere. */ --sec: clamp(88px, 15vh, 200px); --sec-sm: clamp(52px, 8vh, 112px); } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: #FFFFFF; color: #0A0A0A; overflow-x: hidden; font-size: 16px; } /* The original #777 labels fell just below WCAG AA on both paper and ink. Keep the same muted hierarchy with context-aware, passing contrast. */ [style*="color:#777777"] { color: var(--muted, #666666) !important; } [style*="background:#0A0A0A"], [style*="background:#171717"], [style*="background:#292929"] { --muted: #999999; } [style*="background:#FFFFFF"], [style*="background:#F4F3EF"] { --muted: #666666; } /* Explicit opt-out only (set ); the OS flag alone is not used, since motion is core to how this site reads. */ html[data-reduce-motion] { scroll-behavior: auto; } html[data-reduce-motion] *, html[data-reduce-motion] *::before, html[data-reduce-motion] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } a { color: currentColor; text-decoration: none; } a:hover { color: currentColor; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } ::selection { background: #0A0A0A; color: #FFFFFF; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p { text-wrap: pretty; } input, textarea, select, button { font: inherit; color: inherit; } input, textarea, select { max-width: 100%; } /* Responsive utilities — the one thing inline styles cannot express. Elements keep their own inline `display`; these only switch them off. */ @media (max-width: 979px) { [data-md-only] { display: none !important; } }@media (min-width: 980px) { [data-md-hide] { display: none !important; } } @media (max-width: 719px) { [data-sm-hide] { display: none !important; } } @media (min-width: 720px) { [data-sm-only] { display: none !important; } } @media (max-width: 719px) { [data-privacy-grid] { grid-template-columns: minmax(0, 1fr) !important; } [data-privacy-grid] > aside { position: static !important; } [data-footer-wordmark] { white-space: normal !important; overflow-wrap: normal; word-break: normal; } } /* Scroll-driven sections default to their finished state, so their content is readable if the motion engine never runs. The engine resets --sp to 0 the moment it takes ownership of the element. */ [data-scroll-progress] { --sp: 1; } /* Native accordion: no marker, animated panel. Not expressible inline. */ summary { list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } @keyframes bwd-acc { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } details[data-acc][open] > div { animation: bwd-acc .4s cubic-bezier(.22, 1, .36, 1); } details[data-acc][open] summary [data-chev] { transform: rotate(45deg); }