/* ============================================================ Base — reset, typography defaults, body, accessibility ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--f-body); font-size: var(--type-base); line-height: var(--lh-normal); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative; } /* Subtle newspaper-grain overlay across the page (purple-tinted) */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.06; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--c-terracotta); text-decoration: none; text-underline-offset: 0.18em; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--c-terracotta-dk); text-decoration: underline; } p { margin: 0 0 var(--s-2); max-width: 70ch; } h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--c-text); margin: 0 0 var(--s-2); font-variation-settings: "opsz" 144, "SOFT" 50; } h1 { font-size: var(--type-display); font-weight: 400; } h2 { font-size: var(--type-3xl); font-weight: 450; } h3 { font-size: var(--type-2xl); font-weight: 500; } h4 { font-size: var(--type-xl); font-weight: 500; font-variation-settings: "opsz" 36; } h5 { font-size: var(--type-lg); font-weight: 600; font-variation-settings: "opsz" 18; } h6 { font-size: var(--type-xs); font-family: var(--f-body); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-terracotta); } em, i, .italic { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; } strong, b { font-weight: 600; } ::selection { background: var(--c-terracotta); color: var(--c-paper); } button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; } ul, ol { margin: 0 0 var(--s-2); padding-left: 1.25em; } li + li { margin-top: var(--s-1); } li::marker { color: var(--c-terracotta); } hr { border: 0; border-top: 1px solid var(--c-rule); margin: var(--s-4) 0; } /* Focus */ :focus-visible { outline: 2px solid var(--c-bougainvillea); outline-offset: 3px; border-radius: 2px; } /* Skip link */ .skip { position: absolute; left: -9999px; background: var(--c-espresso); color: var(--c-limestone); padding: 0.5rem 1rem; z-index: 1000; } .skip:focus { left: 1rem; top: 1rem; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ Admin-only content gating - Any element with [data-admin-only] is HIDDEN by default (so non-admins NEVER see financial information, even during the brief moment before auth state resolves) - When auth.js confirms admin role, it adds .is-admin to and the content reveals ============================================================ */ [data-admin-only] { display: none !important; } body.is-admin [data-admin-only] { display: revert !important; } /* The stat-row that contains a financial stat tightens its column count when that stat is hidden (no awkward gap). */ .stat-row[data-has-financial] { grid-template-columns: repeat(4, 1fr); } body:not(.is-admin) .stat-row[data-has-financial] { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { body:not(.is-admin) .stat-row[data-has-financial] { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { body:not(.is-admin) .stat-row[data-has-financial] { grid-template-columns: 1fr; } }