@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,700;0,9..144,900;1,9..144,600&family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root{
    --bg: #cacaca;
    --bg-alt: #b8b8b8;
    --ink: #000000;
    --ink-dim: #32363a;
    --line: #262639;
    --light: #0061bd;
    --amber: #a5a5a5;
    --f-display: 'Fraunces', serif;
    --f-body: 'Space Grotesk', system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, monospace;
    --radius: 10px 3px 10px 3px;
}

/* basics */
*{ 
    box-sizing: border-box; 
}

body {
    margin:0; 
    background: var(--bg); 
    color: var(--ink); 
    font-family: var(--f-body); 
    line-height: 1.4;
    background-image: radial-gradient(var(--bg-alt) 2px, transparent 2px);
    background-size: 25px 25px;
}

img { 
    display:block; 
    max-width:100%; 
}

a { 
    color: inherit; 
}

h1, h2 { 
    font-family: var(--f-display); 
    margin: 0 0 .5em; 
    line-height: 1; 
}

p { 
    font-size: 1.1rem;
    margin: 0 0 1em; 
    color: var(--ink-dim); 
}

code, pre { 
    font-family: var(--f-mono); 
}

table { 
    width:100%; 
    border-collapse: collapse; 
    font-size:.9rem; 
}

th, td { 
    text-align:left; 
    padding: 8px 10px; 
    border-bottom: 1px solid var(--line); 
}

th { 
    color: var(--ink-dim); 
    font-weight: 500; 
}

.wrap { 
    max-width: 900px; 
    margin-inline: auto; 
    padding-inline: 22px; 
}

section { 
    padding-block: 3em; 
}

.eyebrow { 
    font-family: var(--f-mono); 
    font-size: .78rem; 
    text-transform: uppercase; 
    color: var(--light); 
    margin-bottom: .8em; 
}

/* nav */
.site-nav { 
    border-bottom: 1px solid var(--line); 
    background: var(--bg); 
}

.site-nav .wrap { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 25px; 
    padding-block: 25px; 
    flex-wrap: wrap; 
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
}

.brand em {
    color: var(--light);
    font-style: normal;
}

.site-logo {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

.nav-links { 
    display:flex; 
    align-items:center; 
    gap: 20px; 
    list-style:none; 
    margin:0; 
    padding:0; 
}

.nav-links a { 
    text-decoration: none; 
    color: var(--ink-dim); 
}

.nav-links a[aria-current="page"]{ 
    color: var(--ink); 
}

/* buttons */

.btn{ 
    display:inline-flex; 
    align-items:center; 
    font-size: 1.1rem; 
    padding: 0.7em 1em; 
    border-radius: var(--radius); 
    text-decoration:none; 
    border: 1px solid var(--line);
}

.btn-primary { 
    background: var(--light); 
    border-color: var(--light); 
    color: var(--bg); 
}

.btn-ghost { 
    background-color: var(--bg);
    color: var(--ink); 
}

/* hero */
.hero-grid{ 
    padding-block: 3em; 
    display:grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 40px; 
    align-items:center; 
}

.hero h1 { 
    font-size: clamp(3.1rem, 6.5vw, 3.95rem); 
    font-weight: 900; 
}

.hero .lede { 
    max-width: 50ch; 
}

.hero-cta { 
    display: flex; 
    gap: 15px; 
    flex-wrap: wrap; 
    margin-top: 2em; 
}

/* content */
.callout { 
    background: var(--bg-alt); 
    border-left: 3px solid var(--amber); 
    padding: 14px 16px; 
    font-size: 1.1rem; 
    color: var(--ink-dim); 
}

.callout strong{ 
    color: var(--ink); 
}

/* footer */
.site-footer { 
    border-top:1px solid var(--line); 
    padding-block: 28px; 
}

.site-footer .wrap { 
    display:flex; 
    justify-content:space-between; 
    flex-wrap:wrap; 
    gap:10px; 
    font-size:1rem; 
    color: var(--ink-dim); 
}

@media (max-width: 760px){
    .hero-grid { 
        grid-template-columns: 1fr; 
    }
}