/* ============================================
SORT SQUAD — brand.css
Load fonts in BEFORE this file:
============================================ */
:root {
--ss-ink: #1B1815; /* near-black: dark backgrounds, display text on light */
--ss-panel: #26221D; /* dark card/panel */
--ss-line-dark: #332E28; /* hairlines on dark */
--ss-signal: #C98A3E; /* brand orange: tile, accents, links on dark */
--ss-signal-deep: #A5691F; /* darker orange: links/labels on light (contrast-safe) */
--ss-signal-shadow: #5C3E14;/* small text ON orange */
--ss-paper: #F6F2EA; /* cream: light backgrounds, text on dark */
--ss-paper-dim: #C9C2B6; /* secondary text on dark */
--ss-card: #FFFFFF;
--ss-line-light: #E4DFD4; /* hairlines on light */
--ss-grey: #928A80; /* muted labels */
--ss-grey-dark: #57503F; /* body text secondary on light */
--ss-font-display: 'Archivo', Arial, sans-serif; /* headlines, buttons, wordmark */
--ss-font-body: 'Libre Franklin', Arial, sans-serif; /* paragraphs, UI */
--ss-font-label: 'IBM Plex Mono', monospace; /* eyebrows, meta, numbers */
}
body {
margin: 0;
font-family: var(--ss-font-body);
color: var(--ss-ink);
background: var(--ss-paper);
}
h1, h2, h3, .ss-display {
font-family: var(--ss-font-display);
font-weight: 900;
letter-spacing: -0.01em;
line-height: 1.03;
text-transform: uppercase;
margin: 0;
}
a { color: var(--ss-signal-deep); }
a:hover { color: var(--ss-signal); }
.ss-on-dark a { color: var(--ss-signal); }
.ss-on-dark a:hover { color: var(--ss-paper); }
/* Eyebrow label above sections */
.ss-label {
font-family: var(--ss-font-label);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ss-signal-deep);
}
.ss-on-dark .ss-label { color: var(--ss-signal); }
/* Primary button */
.ss-btn {
display: inline-block;
font-family: var(--ss-font-display);
font-weight: 800;
font-size: 15px;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
color: var(--ss-ink);
background: var(--ss-signal);
padding: 16px 30px;
border-radius: 10px;
border: none;
cursor: pointer;
}
.ss-btn:hover { background: #D99A4E; color: var(--ss-ink); }
a.ss-btn, .ss-on-dark a.ss-btn, a.ss-btn:hover, .ss-on-dark a.ss-btn:hover { color: var(--ss-ink); }
a.ss-btn-ghost, a.ss-btn-ghost:hover { color: var(--ss-ink); }
.ss-on-dark a.ss-btn-ghost, .ss-on-dark a.ss-btn-ghost:hover { color: var(--ss-paper); }
/* Secondary button */
.ss-btn-ghost {
display: inline-block;
font-family: var(--ss-font-display);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
color: var(--ss-ink);
background: transparent;
padding: 15px 28px;
border-radius: 10px;
border: 2px solid var(--ss-ink);
cursor: pointer;
}
.ss-on-dark .ss-btn-ghost { color: var(--ss-paper); border-color: var(--ss-paper); }
/* Logo lockup (see logo-snippets.html for markup) */
.ss-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.ss-logo-tile { display: flex; flex: none; }
.ss-logo-words {
font-family: var(--ss-font-display);
font-weight: 900;
letter-spacing: -0.01em;
color: var(--ss-ink);
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
}
.ss-on-dark .ss-logo-words { color: var(--ss-paper); }
.ss-logo-slogan {
font-family: var(--ss-font-display);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ss-signal-deep);
}
.ss-on-dark .ss-logo-slogan { color: var(--ss-signal); }