/* Tools Rodeo: sand, leather and rust, with a wanted-poster hero. */
@font-face { font-family: "Rye"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/sites/tools-rodeo/fonts/rye-regular.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/sites/tools-rodeo/fonts/courier-prime-regular.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/sites/tools-rodeo/fonts/courier-prime-bold.woff2") format("woff2"); }

:root {
    --site-canvas: #f4e6c9;
    --site-surface: #fffaf0;
    --site-ink: #3a2417;
    --site-accent: #b5442b;
    --site-accent-soft: #f3d9c9;
    --site-muted: #8a5a3b;
    --site-font: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
    --site-display-font: "Rye", Georgia, serif;
    --site-radius: 0;
    --site-card-shadow: 5px 5px 0 0 #3a2417;
    --site-card-shadow-small: 4px 4px 0 0 #3a2417;
    --site-control-shadow: 3px 3px 0 0 #b5442b;
    --site-control-shadow-muted: 3px 3px 0 0 #8a5a3b;
    --site-stone-50: #fbf5ea;
    --site-stone-100: #f6ecd9;
    --site-stone-200: #ead9bb;
    --site-stone-300: #dcc49c;
    --site-stone-400: #b8986f;
    --site-stone-500: #8a5a3b;
    --site-stone-700: #5a3a26;
    --site-link: #b5442b;
    --site-editor-active: #f0c9a8;
    --site-label: #b5442b;
    --site-label-align: center;
    --site-hero-align: center;
    --site-hero-rule: 3px double #3a2417;
    --site-hero-padding: 0.9rem;
    --site-hero-margin: auto;
    --site-prose-pre-bg: #3a2417;
    --site-prose-kbd-shadows: 58 36 23;
}

/* The wide Rye wordmark would push the account control onto a second header
   row on large screens, so the header logo is a little shorter there. The
   search box keeps its fixed width and sits right, leaving a gap to the logo.
   The unprefixed hooks (site-logo, site-search) are in the shared header. */
@media (min-width: 1024px) {
    .site-logo { height: 1.75rem; }
    .site-search { width: 14rem; }
}