/* ==========================================================================
   abstractmonkey.dev: the one stylesheet.

   Palette, type scale, spacing, the light/dark semantic layer, fonts, reset,
   focus and reduced-motion rules are lifted from the BeastBox site
   (beastbox-showcase, main: src/styles/tokens.css and base.css), so both sites
   are drawn by the same hand. The few components (top bar, footer, button,
   labels) are cut down from its components.css.

   Rules carried over from that site's DESIGN.md:
   - Signal orange is an accent, used sparingly. It is never text on paper
     (2.67:1). Here it appears only in the BeastBox mark's bars and the one
     primary button.
   - No glass, no glow, no shadows, no radii, no decorative gradients.
   - JetBrains Mono 800 is the wordmark and display face.
   - Colour follows the visitor's system (prefers-color-scheme). No toggle.
   Contrast ratios below are WCAG 2.x, measured with the formula in
   beastbox-showcase scripts/contrast.mjs.
   ========================================================================== */

/* --- fonts: self-hosted (SIL OFL 1.1; licences in fonts/). Never fetched from a third party. --- */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/archivo-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/archivo-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/jetbrains-mono-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  /* --- canonical brand colours (shared with BeastBox) --- */
  --paper:  #EAE5D9; /* light ground */
  --ink:    #17161B; /* dark ground; text and rules on paper */
  --signal: #FF4A1F; /* accent: fills only on paper */

  /* --- derived (opacity mixes, pre-multiplied to solid hex) --- */
  --ink-muted:      #565454; /* ink @ 70% over paper.   5.98:1 on paper (AA text) */
  --paper-muted:    #ABA7A0; /* paper @ 70% over ink.   7.51:1 on ink   (AA text) */
  --ink-hairline:   #C0BCB3; /* ink @ 20% over paper.   decorative rules only, never text */
  --paper-hairline: #403F43; /* paper @ 20% over ink.   decorative rules only, never text */

  /* --- type --- */
  --font-display: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /* 800 only: the wordmark's face */
  --font-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /* 400/500: labels */

  /* a quieter scale than BeastBox's launch page: its h2 size is this site's page title */
  --fs-title:   clamp(2.125rem, 1.1rem + 3.6vw, 3.75rem);
  --fs-h2:      clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  --fs-h3:      clamp(1.1875rem, 1rem + 0.6vw, 1.375rem);
  --fs-lead:    clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --fs-body:    1.0625rem;  /* 17px */
  --fs-note:    0.8125rem;  /* 13px */
  --fs-label:   0.75rem;    /* 12px mono annotations */

  --ls-label:   0.18em;
  --ls-word:    0.14em;     /* the ABSTRACT MONKEY wordmark */

  --lh-snug: 1.15;
  --lh-body: 1.5;

  /* --- spacing (4px base) --- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-6: 1.5rem;   --s-8: 2rem;     --s-12: 3rem;    --s-16: 4rem;
  --s-24: 6rem;

  /* --- layout --- */
  --gutter: 1.5rem;
  --margin: 1.5rem;
  --content-max: 72rem;
  --topbar-h: 4.5rem;
  --rule: 1px;

  /* --- motion: hard steps, not fades --- */
  --step-fast: 90ms;
  --ease-hard: steps(2, jump-none);
}
@media (min-width: 48em) { :root { --gutter: 2rem; --margin: 2.5rem; --topbar-h: 5rem; } }
@media (max-width: 30em) { :root { --gutter: 1rem; --margin: 1rem; --topbar-h: 3.5rem; } }

/* ==========================================================================
   Semantic layer. Components use only these. CSS only: the page follows the
   visitor's colour scheme, and there is no toggle.
   ========================================================================== */

/* light: paper ground */
:root {
  color-scheme: light dark;
  --bg:          var(--paper);
  --fg:          var(--ink);         /* 14.32:1 */
  --fg-muted:    var(--ink-muted);   /*  5.98:1 */
  --rule-color:  var(--ink);
  --hairline:    var(--ink-hairline);
  --accent:      var(--signal);      /* fills only */
  --accent-fg:   var(--ink);         /* text on --accent: 5.36:1 */
  --accent-edge: var(--ink);
  --accent-text: var(--ink);         /* orange is never text on paper */
  --focus:       var(--ink);
}

/* dark: ink ground. .surface-ink is ink in both themes (the footer). */
.surface-ink {
  --bg:          var(--ink);
  --fg:          var(--paper);       /* 14.32:1 */
  --fg-muted:    var(--paper-muted); /*  7.51:1 */
  --rule-color:  var(--paper);
  --hairline:    var(--paper-hairline);
  --accent:      var(--signal);
  --accent-fg:   var(--ink);
  --accent-edge: var(--signal);
  --accent-text: var(--signal);      /* orange text is allowed on ink: 5.36:1 */
  --focus:       var(--paper);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink); --fg: var(--paper); --fg-muted: var(--paper-muted);
    --rule-color: var(--paper); --hairline: var(--paper-hairline);
    --accent: var(--signal); --accent-fg: var(--ink); --accent-edge: var(--signal); --accent-text: var(--signal);
    --focus: var(--paper);
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--bg);
  scrollbar-color: var(--fg-muted) var(--bg);
}
::selection { background: var(--fg); color: var(--bg); } /* inverse print, never orange */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul[role='list'] { list-style: none; padding: 0; }

/* --- type --- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: var(--lh-snug); letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--fs-title); letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
h3 { font-size: var(--fs-h3); }
p, li { max-width: 62ch; text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.4; max-width: 36ch; }
.muted { color: var(--fg-muted); }
strong { font-weight: 600; }

/* mono annotation, in tracked caps */
.label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.4;
}
.note {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  line-height: 1.55;
  color: var(--fg-muted);
}

/* body-text links: 2px hard underline, inverts on hover (hover only where there is a pointer) */
.prose a, .footer a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: background-color var(--step-fast) var(--ease-hard), color var(--step-fast) var(--ease-hard);
}
@media (hover: hover) { .prose a:hover, .footer a:hover { background: var(--fg); color: var(--bg); } }
/* long addresses (an email) may break anywhere rather than push the page wide at 360px */
.prose a[href^='mailto:'] { overflow-wrap: anywhere; }

/* --- focus: always visible, hard-edged --- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.skip-link {
  position: absolute; left: var(--s-4); top: -100%; z-index: 100;
  background: var(--fg); color: var(--bg);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus-visible { top: var(--s-4); outline-color: var(--signal); }

/* --- reduced motion: no transitions at all --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
}

/* --- layout --- */
.container {
  width: 100%;
  margin-inline: auto;
  max-width: calc(var(--content-max) + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
  padding-left: calc(var(--margin) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--margin) + env(safe-area-inset-right, 0px));
}

/* ==========================================================================
   Components
   ========================================================================== */

/* --- wordmark: ABSTRACT MONKEY, JetBrains Mono 800, tracked caps --- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--ls-word);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* --- top bar: wordmark left, two links right, one rule underneath --- */
.topbar { border-bottom: var(--rule) solid var(--rule-color); padding-top: env(safe-area-inset-top, 0px); }
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s-4);
  min-height: var(--topbar-h);
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  text-decoration: none;
}
@media (min-width: 48em) { .topbar__brand { font-size: 1.0625rem; } }
.topbar__links { display: flex; margin-right: -0.625rem; } /* the last link's padding sits in the margin, so its text aligns with the page edge */
.topbar__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.625rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--step-fast) var(--ease-hard), color var(--step-fast) var(--ease-hard);
}
@media (hover: hover) { .topbar__links a:hover { background: var(--fg); color: var(--bg); } }
/* phones: wordmark and both links share one row down to 340px wide (tighter tracking and padding) */
@media (max-width: 30em) {
  .topbar__inner { column-gap: var(--s-3); }
  .topbar__brand { font-size: 0.8125rem; letter-spacing: 0.1em; }
  .topbar__links { margin-right: -0.5rem; }
  .topbar__links a { padding: 0 0.5rem; letter-spacing: 0.14em; }
}
/* the current page: a 3px rule under the word and heavier weight. Shape and weight, not colour. */
.topbar__links a[aria-current='page'] { font-weight: 500; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* --- button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border: 1.5px solid var(--rule-color);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition:
    background-color var(--step-fast) var(--ease-hard),
    color var(--step-fast) var(--ease-hard),
    border-color var(--step-fast) var(--ease-hard);
}
@media (hover: hover) { .btn:hover { background: var(--fg); color: var(--bg); } }
.btn--primary { background: var(--accent); border-color: var(--accent-edge); color: var(--accent-fg); } /* ink on signal: 5.36:1 */
@media (hover: hover) { .btn--primary:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); } }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }

/* --- page head: the h1 and its lead --- */
.page-head { padding-block: var(--s-16) var(--s-12); }
@media (min-width: 48em) { .page-head { padding-block: var(--s-24) var(--s-16); } }
.page-head .label { margin-bottom: var(--s-6); }
.page-head .lead { margin-top: var(--s-6); }
.page-head h1 { max-width: 18ch; }

/* --- sections: a full-width rule, the h2 in the left columns, content on the right from 48em --- */
.section { border-top: var(--rule) solid var(--rule-color); padding-block: var(--s-12) var(--s-16); }
@media (min-width: 48em) { .section { padding-block: var(--s-16) var(--s-24); } }
/* long documents (support, privacy): the same rule and columns, less air between sections */
.section--doc { padding-block: var(--s-12); }
@media (min-width: 48em) { .section--doc { padding-block: var(--s-16); } }
.section__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
@media (min-width: 48em) {
  .section__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gutter); }
}
.section__body > * + * { margin-top: var(--s-4); }

/* long-form text: privacy and support pages */
.prose h2 { margin-top: var(--s-12); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-8); }
.prose ul { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--fg-muted); }

/* --- definition rows (contact details) --- */
.facts { margin-top: var(--s-6); border-top: var(--rule) solid var(--rule-color); }
.facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1) var(--gutter);
  padding-block: var(--s-4);
  border-bottom: var(--rule) solid var(--hairline);
}
@media (min-width: 36em) { .facts__row { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; } }
.facts dt { color: var(--fg-muted); }
.facts dd { margin: 0; }

/* --- product block (home): BeastBox --- */
.product { border: 1.5px solid var(--rule-color); padding: var(--s-6); }
@media (min-width: 48em) { .product { padding: var(--s-8); } }
.product__name { margin: 0; }
/* the official lockup, outlined: ink parts follow `color`, the bars are signal (a mark, not text),
   the tagline is text, so it takes --accent-text: ink on paper, signal on ink. */
.lockup { display: block; width: min(100%, 26rem); height: auto; overflow: visible; color: var(--fg); }
.lockup__bars { fill: var(--signal); }
.lockup__tagline { fill: var(--accent-text); }
/* below 30em the drawn tagline would be about 7px tall: drop it */
@media (max-width: 30em) { .lockup__tagline { display: none; } }
.product__text { margin-top: var(--s-6); }
.product__text > * + * { margin-top: var(--s-4); }

/* --- footer: ink in both themes; on the ink page it opens with a paper rule --- */
.footer { border-top: var(--rule) solid var(--rule-color); padding-block: var(--s-12) var(--s-8); background: var(--bg); color: var(--fg); }
@media (min-width: 48em) { .footer { padding-block: var(--s-16) var(--s-8); } }
.footer__head { display: flex; flex-direction: column; gap: var(--s-8); }
@media (min-width: 48em) { .footer__head { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
.footer__wordmark { font-size: 1.0625rem; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.footer .footer__wordmark { text-decoration: none; }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); margin: 0; }
.footer__links a { display: inline-flex; align-items: center; min-height: 2.75rem; text-underline-offset: 4px; }
.footer__base {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-12);
  padding-top: var(--s-4);
  border-top: var(--rule) solid var(--hairline);
}
.footer__base p { max-width: 72ch; }
.page-head .page-head__date { margin-top: var(--s-6); }

/* --- 404 --- */
.notfound__links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); padding: 0; }