/* Base typography + body. Self-hosted fonts; preload the body weight in . */ @font-face { font-family: 'Cinzel'; src: url('../fonts/cinzel/Cinzel-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Cinzel'; src: url('../fonts/cinzel/Cinzel-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('../fonts/dm-mono/DMMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('../fonts/dm-mono/DMMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Exo 2'; src: url('../fonts/exo-2/Exo2-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Exo 2'; src: url('../fonts/exo-2/Exo2-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Exo 2'; src: url('../fonts/exo-2/Exo2-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ---- Document base ---- */ html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-base); font-weight: 400; } /* ---- Headings ---- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); font-weight: 700; color: var(--color-fg); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); font-family: var(--font-body); font-weight: 700; letter-spacing: var(--tracking-normal); } h4 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 700; } /* ---- Inline text ---- */ a { color: var(--color-cipher); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 120ms ease; } a:hover { color: color-mix(in srgb, var(--color-cipher) 80%, var(--color-ink)); } a:focus-visible { outline: 2px solid var(--color-cipher); outline-offset: 2px; border-radius: 2px; } strong, b { font-weight: 700; } em, i { font-style: italic; } code, pre, kbd, samp { font-family: var(--font-data); font-size: 0.92em; } p { margin: 0 0 var(--space-2); } p:last-child { margin-bottom: 0; } ul, ol { list-style: revert; padding-left: var(--space-3); } ul li, ol li { margin-bottom: var(--space-1); } blockquote { border-left: 3px solid var(--color-sacred-gold); padding: var(--space-1) var(--space-3); margin: var(--space-3) 0; color: var(--color-fg-muted); font-style: italic; } hr { border: 0; height: 1px; background: var(--color-rule); margin: var(--space-4) 0; } ::selection { background: var(--color-sacred-gold); color: var(--color-cosmos); } /* ---- Skip link (accessibility) ---- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-cosmos); color: var(--color-paper); padding: var(--space-1) var(--space-2); z-index: 100; } .skip-link:focus { left: var(--space-2); top: var(--space-2); } /* ---- Print ---- */ @media print { body { background: white; color: black; } nav, .site-header__nav, .city-hub__cta, .site-footer__inner > nav { display: none !important; } a { color: black; text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; } .citations { break-before: page; } }