/* ============================================================
   separatorbrook.com — one stylesheet for the whole site.
   Plain CSS. No build step, no framework, nothing to compile.
   Edit this file, re-upload, done.

   Type system, in short:
     Headings   — serif  (the company name has a 19th-century story)
     Body text  — sans   (easiest to read at length)
     Small labels — monospace (the quiet "a programmer made this" tell)

   The serif is one 23 KB font file we host ourselves (see section 0).
   The other two come from fonts already on the visitor's device. Nothing
   is downloaded from another server, which is why the site loads fast
   and contacts nobody.

   Contents:
     1. Design tokens (colors, spacing) — change these first
     2. Base / resets
     3. Layout
     4. Header + nav
     5. Content elements
     6. Cards (used for the product list)
     7. Footer
     8. Dark mode
   ============================================================ */


/* --- 0. The one font we ship ---------------------------------
   Playfair Display, used for headings and the wordmark. The file lives
   in assets/fonts/ on our own domain — it is NOT loaded from Google
   Fonts or any other server, which is what keeps the "this site
   contacts nobody" claim on the About page true.

   Only one weight (600) is included, which is why the whole file is
   23 KB. If you ever want bold or italic headings you'd need to add
   those files too; until then the browser would fake them badly.

   font-display: swap means text shows immediately in the fallback
   serif and switches when the font arrives — nothing is ever invisible.

   License: SIL Open Font License. The full text is in
   assets/fonts/LICENSE-playfair-display.txt and must stay there.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-display-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* --- 1. Design tokens ---------------------------------------
   Every color and size in the site comes from these variables.
   Change one here and it updates everywhere.
   ------------------------------------------------------------ */
:root {
  --ink:        #191b1e;   /* main text */
  --ink-soft:   #565f68;   /* secondary text */
  --paper:      #faf8f4;   /* page background */
  --panel:      #f0ece4;   /* card / panel background */
  --rule:       #ddd7cc;   /* hairlines and borders */
  --accent:     #8f4420;   /* iron-oxide rust — links, marks */
  --accent-hov: #6f3417;   /* accent on hover */

  /* The three typefaces, named once so you can swap them in one place. */
  --font-body:  ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head:  "Playfair Display", ui-serif, Georgia, "Iowan Old Style",
                "Times New Roman", serif;
  --font-label: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 34rem;        /* comfortable reading width */
  --page:    62rem;        /* max width of the page shell */

  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.75rem;
  --step-3: 2.2rem;
  --step-4: 3.2rem;
}


/* --- 2. Base ------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

/* Keyboard users need to see where they are. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lets a keyboard or screen-reader user jump past the nav. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip-link:focus {
  left: 0;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent-hov); }

img, svg { max-width: 100%; height: auto; }


/* --- 3. Layout ---------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

main { display: block; }

section {
  padding-block: var(--step-4);
  border-top: 1px solid var(--rule);
}
section:first-of-type { border-top: 0; }

/* Constrain prose to a readable line length. */
.prose > p,
.prose > ul,
.prose > ol,
.prose > h2,
.prose > h3,
.prose > blockquote { max-width: var(--measure); }


/* --- 4. Header + nav ---------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  padding-block: 1.15rem;
}
.site-header .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

/* The wordmark is live text, not an image — it stays sharp on every
   screen, inverts correctly in dark mode, and costs nothing to load.
   Uppercase + letter-spacing is what gives it the engraved look. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark-mark {
  flex: none;
  align-self: center;
  height: 26px;
  width: auto;
}

/* The rust "LLC" that follows the name. */
.wordmark-llc {
  font-size: 0.6em;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
}
.site-nav a:hover { color: var(--accent); }

/* Marks the page you're currently on. */
.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}


/* --- 5. Content --------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); margin-top: 0; }
h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }

p { margin: 0 0 1.1em; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* Small monospace label above a heading. */
.eyebrow {
  font-family: var(--font-label);
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

.hero { padding-block: 4rem var(--step-4); }
.hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.35rem); max-width: 17ch; }

ul.plain { list-style: none; margin: 0; padding: 0; }

/* A short label/value list — used for app details and company facts. */
.facts {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) 1fr;
  gap: 0.55rem 1.5rem;
  margin: 0;
  max-width: 46rem;
}
.facts dt {
  font-family: var(--font-label);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.28em;
}
.facts dd { margin: 0; }
@media (max-width: 34rem) {
  .facts { grid-template-columns: 1fr; gap: 0.15rem; }
  .facts dd { margin-bottom: 0.8rem; }
}

/* "In development" marker. */
.status-tag {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}


/* --- 6. Cards ------------------------------------------------
   The product list. To add a product, copy one <li class="card">
   block in index.html and change the words inside it.
   ------------------------------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.7rem 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.card h3 { margin-bottom: 0.25rem; }
.card p  { margin-bottom: 0.6rem; color: var(--ink-soft); }
.card .card-link { margin-top: auto; font-weight: 600; font-size: 0.97rem; }


/* --- 6b. Artwork ---------------------------------------------
   The illustrations are WebP with transparent backgrounds, so the
   page color shows through and they work in light and dark mode
   without needing two versions of each file.

   width/height are set on the <img> tags in the HTML as well. That's
   not decoration — it lets the browser reserve the right space before
   the image downloads, so the text doesn't jump as the page loads.
   ------------------------------------------------------------ */
.figure-art {
  margin: 0 0 2rem;
  max-width: 38rem;
}
.figure-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* The small trees-and-water mark above the footer. It is dark line art,
   so in dark mode it gets inverted to light rather than disappearing. */
.footer-art {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin: 0 0 2rem;
  opacity: 0.55;
}


/* --- 7. Footer ---------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: var(--step-4);
  padding-block: 2rem 3rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.site-footer p { margin: 0 0 0.4em; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--accent); }
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}


/* --- 8. Dark mode -------------------------------------------
   Only the tokens change. Everything else follows automatically.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #ece8e2;
    --ink-soft:   #9aa2aa;
    --paper:      #14161a;
    --panel:      #1c1f24;
    --rule:       #2b3037;
    --accent:     #dd8b5f;
    --accent-hov: #eda87f;
  }
  .skip-link { background: var(--paper); color: var(--ink); }

  /* The two illustrations are dark ink, which would vanish on a dark
     page. invert() flips the lightness; hue-rotate(180deg) then puts the
     rust color back where invert() had turned it blue-green. Together
     they give a light version of each mark without a second image file. */
  .footer-art { filter: invert(1); opacity: 0.4; }
  .wordmark-mark { filter: invert(1) hue-rotate(180deg); }
}