/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
:root { --ink: #101010; --paper: #f4f2eb; --blue: #1238ff; --acid: #dfff00; --line: rgba(16, 16, 16, .24); --mono: "DM Mono", monospace; --sans: "Space Grotesk", sans-serif; --gutter: clamp(1rem, 4vw, 4.5rem); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.65; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .75rem 1rem; background: var(--acid); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-header { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 5.25rem; padding: .65rem var(--gutter); border-bottom: 1px solid var(--ink); }
.brand { display: inline-flex; justify-self: start; text-decoration: none; }
.brand-wordmark { font-size: 1.18rem; font-weight: 700; line-height: 1; letter-spacing: -.065em; text-transform: uppercase; }
.header-contact { justify-self: end; padding: .75rem 1rem; background: var(--ink); color: white; font: 500 .72rem/1 var(--mono); text-decoration: none; text-transform: uppercase; }
.standard-page { min-height: 70vh; padding: clamp(4rem, 9vw, 9rem) var(--gutter); }
.standard-page > header { max-width: 70rem; padding-bottom: 3rem; border-bottom: 1px solid var(--ink); }
.eyebrow { margin: 0 0 1.25rem; font: 500 .72rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.standard-page h1 { max-width: 65rem; margin: 0; font-size: clamp(3.5rem, 9vw, 9rem); font-weight: 600; line-height: .85; letter-spacing: -.08em; }
.prose { max-width: 48rem; margin: 3rem auto; font-size: 1.08rem; }
.prose h2 { margin: 2.25em 0 .6em; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1; letter-spacing: -.04em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.25rem; }
.prose li + li { margin-top: .5rem; }
.prose a { color: var(--blue); }
.page-actions { display: flex; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
.button { display: inline-block; padding: 1rem 1.25rem; background: var(--ink); color: white !important; font: 500 .76rem/1.2 var(--mono); text-decoration: none; text-transform: uppercase; }
.button:hover { background: var(--blue); }
.site-footer { display: grid; grid-template-columns: .5fr 1fr auto .7fr auto; align-items: end; gap: 2rem; padding: 3.5rem var(--gutter); background: var(--ink); color: white; }
.site-footer p { margin: 0; color: #aaa; font-size: .85rem; }
.site-footer > a:not(.brand), .footer-links { font: .8rem var(--mono); }
.footer-links { display: flex; gap: 1rem; }
.site-footer small { color: #777; font: .62rem var(--mono); }
@media (max-width: 900px) { .site-footer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .site-header { min-height: 4.5rem; } .brand-wordmark { font-size: 1.05rem; } .header-contact { padding: .7rem; font-size: .62rem; } .site-footer { grid-template-columns: 1fr; align-items: start; } }