/* ========================================================================== SPI — base.css Self-hosted fonts, reset, element defaults. No third-party requests. ========================================================================== */ /* --- Fonts: self-hosted variable woff2 ------------------------------------ Replaces the previous Google Fonts CDN import. No external request, no render-blocking round trip, and the site works offline / behind a firewall — a requirement for a static institutional deployment. */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/fraunces-latin-ext-full-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext-wght-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; /* White is the canvas. Navy and ivory are applied per band, never globally — the previous build set ivory on , which made warm neutral the default surface. */ background: var(--spi-white); color: var(--spi-ink); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "kern" 1, "liga" 1, "calt" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; } /* --- Headings -------------------------------------------------------------- */ h1, h2, h3, h4, h5 { font-family: var(--font-display); font-variation-settings: var(--fr-axes); font-weight: 400; color: var(--spi-ink); margin: 0 0 var(--s-4); line-height: var(--lh-heading); letter-spacing: -0.018em; text-wrap: balance; } h1 { font-size: var(--fs-hero); line-height: var(--lh-display); letter-spacing: -0.028em; } h2 { font-size: var(--fs-h2); letter-spacing: -0.024em; } h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.012em; } h4 { font-family: var(--font-ui); font-size: var(--fs-h4); font-weight: 600; letter-spacing: 0; } /* --- Text ------------------------------------------------------------------ */ p { margin: 0 0 var(--s-4); } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } strong, b { font-weight: 600; } ul, ol { margin: 0 0 var(--s-4); padding-left: 1.1rem; } li { margin-bottom: var(--s-2); } img, svg { max-width: 100%; display: block; } img { height: auto; } hr { border: 0; border-top: 1px solid var(--ink-line); margin: var(--s-12) 0; } ::selection { background: var(--gold-wash); color: var(--spi-ink); } /* --- Focus ------------------------------------------------------------------ Visible on both light and dark bands. Gold at 3px clears 3:1 against white and navy alike. */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; } .on-ink :focus-visible { outline-color: var(--spi-gold); } .skip-link { position: fixed; top: -6rem; left: var(--s-4); z-index: 200; background: var(--spi-ink); color: var(--spi-white); padding: var(--s-3) var(--s-5); font-size: var(--fs-small); font-weight: 500; text-decoration: none; transition: top var(--dur) var(--ease); } .skip-link:focus { top: var(--s-4); } /* --- Forms ------------------------------------------------------------------ */ input, select, textarea, button { font: inherit; color: inherit; } input[type="email"], input[type="text"], select, textarea { width: 100%; background: var(--spi-white); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 0.8125rem 0.875rem; font-size: var(--fs-small); transition: border-color var(--dur) var(--ease); } input:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--ink-55); } input:disabled, textarea:disabled { background: var(--ink-line-soft); cursor: not-allowed; } /* --- Motion ------------------------------------------------------------------ */ @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; } } /* --- Print -------------------------------------------------------------------- */ @media print { .site-header, .site-footer__newsletter, .skip-link { display: none !important; } body { background: #fff; color: #000; } .band { padding-block: 1.5rem !important; background: #fff !important; color: #000 !important; } }