/* ==========================================================================
   The Little Guy Company
   One typeface (Monaspace Krypton), two Gruvbox palettes, zero build steps.
   ========================================================================== */

@font-face {
  font-family: "Monaspace Krypton";
  src: url("/assets/fonts/MonaspaceKryptonVar.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-style: oblique 0deg 11deg;
  font-display: swap;
}

/* --- Palette ---------------------------------------------------------------
   Lifted from the Gruvbox Light Hard and Gruvbox Dark Hard iTerm2 schemes.
   Light uses the "faded" accents, dark the "bright" ones, same as the
   terminal themes. Surfaces sit one Gruvbox step off the background. */

:root {
  color-scheme: light;

  --bg: #f9f5d7;
  --bg-soft: #f2e5bc;
  --bg-raised: #ebdbb2;
  --line-strong: #bdae93;
  --fg: #3c3836;
  --fg-strong: #282828;
  --fg-muted: #504945;
  --fg-dim: #665c54;

  --red: #9d0006;
  --green: #79740e;
  --yellow: #b57614;
  --blue: #076678;
  --purple: #8f3f71;
  --aqua: #427b58;
  --orange: #af3a03;

  --link: var(--blue);
  /* Gruvbox faded green, 10% darker so small prompt text clears 4.5:1 on cream. */
  --prompt: #6d680d;
  --accent: var(--orange);
  --cursor: var(--fg);
  --selection-bg: #3c3836;
  --selection-fg: #f9f5d7;
  --shadow: #d5c4a1;
  --mark-paper: transparent;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #1d2021;
    --bg-soft: #282828;
    --bg-raised: #3c3836;
    --line-strong: #665c54;
    --fg: #ebdbb2;
    --fg-strong: #fbf1c7;
    --fg-muted: #bdae93;
    --fg-dim: #a89984;

    --red: #fb4934;
    --green: #b8bb26;
    --yellow: #fabd2f;
    --blue: #83a598;
    --purple: #d3869b;
    --aqua: #8ec07c;
    --orange: #fe8019;

    --prompt: var(--green);
    --selection-bg: #665c54;
    --selection-fg: #ebdbb2;
    /* One step below Dark Hard's background (Gruvbox Material's bg_dim). */
    --shadow: #141617;
    --mark-paper: #f2eee9;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #1d2021;
  --bg-soft: #282828;
  --bg-raised: #3c3836;
  --line-strong: #665c54;
  --fg: #ebdbb2;
  --fg-strong: #fbf1c7;
  --fg-muted: #bdae93;
  --fg-dim: #a89984;

  --red: #fb4934;
  --green: #b8bb26;
  --yellow: #fabd2f;
  --blue: #83a598;
  --purple: #d3869b;
  --aqua: #8ec07c;
  --orange: #fe8019;

  --prompt: var(--green);
  --selection-bg: #665c54;
  --selection-fg: #ebdbb2;
  /* One step below Dark Hard's background (Gruvbox Material's bg_dim). */
  --shadow: #141617;
  --mark-paper: #f2eee9;
}

/* --- Base ----------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Monaspace Krypton", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

h1,
h2,
h3,
h4 {
  /* One text size throughout, like a terminal: headings differ by weight,
     color and their Markdown-style markers, not by size. */
  font-size: 1em;
  color: var(--fg-strong);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

p,
ul,
ol,
dl {
  margin: 0;
}

p + p,
p + ul,
ul + p,
p + ol,
ol + p {
  margin-top: var(--row);
}

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

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  background: var(--link);
  color: var(--bg);
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

code,
kbd {
  font: inherit;
  color: var(--fg-strong);
  background: var(--bg-raised);
  padding: 0 0.3ch;
  overflow-wrap: anywhere;
}

strong {
  color: var(--fg-strong);
  font-weight: 700;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  background: var(--bg);
  padding: 0.25em 0.5ch;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Layout --------------------------------------------------------------- */

/* One column, 76ch of body text (in rem, not ch: ch follows each element's
   font size, which would make the smaller footer's column narrower).

   The logo portrait hangs in the margin left of the column, so the column
   always keeps a gutter wide enough to hold it: the portrait and its gap
   (36 logo pixels, see .lockup) plus --edge. Where the centred margin is
   already that wide this is just the normal 16px padding; on tablets the
   column gives up width on its left instead. Percentages in
   padding resolve against the body, so this ignores scrollbar width. */
/* --row is one line of text. Every line on the site is this tall (the logo's
   wordmark excepted), and vertical spacing comes in whole rows of it:
   output sits on the line after its prompt, paragraphs within a section are
   one blank row apart, and every command block or section is --block (two
   rows) from the next, from the header down through the footer. */
:root {
  --row: 1.6rem;
  --block: calc(var(--row) * 2);
  /* A line's glyphs float about a quarter row inside its box; boxes get this
     much extra margin so their edges land where text would (see .card). */
  --inset: calc(var(--row) / 4);
  --p: 1.5px;
  --edge: 16px;
  --gutter: calc(var(--p) * 36 + var(--edge));
}

/* Phones have no margin to hang the portrait in; it stacks above the
   wordmark instead (see .lockup), so they get no gutter. */
@media (max-width: 599px) {
  :root {
    --gutter: 0px;
  }
}

.wrap {
  width: 100%;
  max-width: 47rem;
  margin-inline: auto;
  padding-inline: 16px;
  padding-left: max(16px, calc(var(--gutter) - max(0px, (100% - 47rem) / 2)));
}

/* No sticky footer: like a terminal session, the footer follows straight
   on from the content, --block below it, however short the page is. */
main {
  padding-block: var(--block);
}

/* --- Header ---------------------------------------------------------------
   The wordmark lines up with the text column and the portrait hangs in the
   gutter to its left (see .wrap and .lockup). */

.site-header .wrap {
  padding-block: var(--block) 0;
}

.mark .mark-paper {
  fill: var(--mark-paper);
}

/* Wordmark: Krypton Bold, all caps, default width. */
.logotype {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}

/* --- Terminal bits -------------------------------------------------------- */

/* A command's output starts on the very next line. */
.prompt {
  color: var(--fg-dim);
  overflow-wrap: anywhere;
}

.prompt + * {
  margin-top: 0;
}

.prompt .user {
  color: var(--prompt);
}

.prompt .path {
  color: var(--blue);
}

.prompt .cmd {
  color: var(--fg);
}

.cursor {
  display: inline-block;
  width: 1ch;
  background: var(--cursor);
  color: transparent;
  animation: blink 1.1s steps(1, end) infinite;
  user-select: none;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
  }
}

.rule {
  border: 0;
  height: 1px;
  margin: var(--block) 0;
  background-image: linear-gradient(to right, var(--line-strong) 50%, transparent 50%);
  background-size: 8px 1px;
}

/* --- Sections ------------------------------------------------------------- */

.section + .section {
  margin-top: var(--block);
}

.section-title {
  margin-bottom: var(--row);
}

.section-title::before {
  content: "## ";
  color: var(--accent);
}

.lede {
  color: var(--fg-strong);
}

.muted {
  color: var(--fg-muted);
}

/* --- Lockup --------------------------------------------------------------
   Portrait + two-line wordmark, proportioned like the Figma lockup. Everything
   derives from --p, one logo pixel: the wordmark's cap height is 10 pixels, so
   font-size = p / 0.073, and the portrait's 26x40 frame (which includes the
   one-cell sticker margin) sits 10 pixels from the text. Keep --p on
   half-pixel steps so the portrait lands on the device pixel grid. */

/* --p (one logo pixel) is set on :root, next to .wrap's gutter. */
/* Block-level (not inline-flex) so no line box adds descender space under
   it; fit-content keeps the link only as wide as the logo. */
.lockup {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: calc(var(--p) * 10);
  font-size: calc(var(--p) / 0.073);
  color: var(--fg-strong);
  text-decoration: none;
}

.lockup:hover {
  background: none;
  color: var(--fg-strong);
}

.lockup .mark {
  flex: none;
  width: calc(var(--p) * 26);
  height: calc(var(--p) * 40);
}

.lockup .logotype {
  line-height: 1.132;
}

.lockup .logotype > span {
  display: block;
}

.lockup .logotype .sub {
  font-weight: 400;
}

/* Pull the portrait (26 + 10 logo pixels) out into the gutter so the
   wordmark lines up with the text below. On phones, stack it on top. */
.lockup {
  margin-left: calc(var(--p) * -36);
}

@media (max-width: 599px) {
  .lockup {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--p) * 8);
    margin-left: 0;
  }
}

/* --- Cards: hard offset shadow, no blur, no radius ----------------------- */

.card {
  background: var(--bg-soft);
  border: 2px solid var(--fg-strong);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: calc(var(--row) - 2px) 2.5ch;
}

/* A box edge directly under a line of text would sit tighter than the next
   line of text does, because text carries its own space above and below the
   glyphs and a border doesn't. A quarter row on each side evens that out. */
.card,
.prompt + .card {
  margin-block: var(--inset);
}

/* --- Theme-specific images ---------------------------------------------- */

.for-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .for-light {
    display: none;
  }

  :root:not([data-theme="light"]) .for-dark {
    display: block;
  }
}

:root[data-theme="dark"] .for-light {
  display: none;
}

:root[data-theme="dark"] .for-dark {
  display: block;
}

/* --- Product listing ------------------------------------------------------ */

.product {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--row) 2.5ch;
  align-items: start;
}

.product-icon {
  width: 72px;
  height: 72px;
}

.product-meta {
  color: var(--fg-dim);
}

.product p:not(.product-meta) {
  margin-top: var(--row);
}

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

/* --- App page ------------------------------------------------------------ */

.app-hero {
  display: flex;
  align-items: center;
  gap: var(--row) 3ch;
}

.app-icon {
  flex: none;
  width: 128px;
  height: 128px;
}

.app-name::before {
  content: "# ";
  color: var(--accent);
}

.app-tagline {
  color: var(--fg-muted);
}

.app-lede {
  margin-top: var(--row);
  max-width: 60ch;
}

.app-actions {
  margin-top: var(--row);
}

.app-note {
  margin-top: var(--row);
}

@media (max-width: 560px) {
  .app-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-icon {
    width: 96px;
    height: 96px;
  }
}

/* --- Buttons -------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--row) / 2) 2ch;
  align-items: center;
}

.button {
  display: inline-block;
  font-weight: 700;
  color: var(--bg);
  background: var(--fg-strong);
  border: 2px solid var(--fg-strong);
  padding: calc(var(--row) / 2 - 2px) 1.5ch;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--accent);
  transition: transform 60ms steps(2), box-shadow 60ms steps(2);
}

.button:hover {
  background: var(--fg-strong);
  color: var(--bg);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--accent);
}

.button:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--accent);
}

.button.secondary {
  color: var(--fg-strong);
  background: transparent;
  box-shadow: 4px 4px 0 var(--line-strong);
}

.button.secondary:hover {
  box-shadow: 2px 2px 0 var(--line-strong);
}

/* Not a link yet: a pressed-in, inert button. */
.button.soon,
.button.soon:hover {
  cursor: default;
  color: var(--fg-muted);
  background: var(--bg-raised);
  border-color: var(--line-strong);
  border-style: dashed;
  box-shadow: none;
  transform: none;
}

.badge {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  padding: 0 1ch;
}

/* --- Lists ---------------------------------------------------------------- */

.dash-list {
  list-style: none;
  padding: 0;
}

.dash-list li {
  position: relative;
  padding-left: 3ch;
}

.dash-list li::before {
  content: "->";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-feature-settings: "liga" 0, "calt" 0;
}

.feature-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
  gap: var(--row) 4ch;
}

.feature-list h3::before {
  content: "> ";
  color: var(--prompt);
}

.feature-list p {
  color: var(--fg-muted);
}

/* --- Key/value spec tables ------------------------------------------------ */

.spec {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 3ch;
}

.spec dt {
  color: var(--fg-dim);
}

.spec dt::after {
  content: ":";
}

.spec dd {
  margin: 0;
}

@media (max-width: 480px) {
  .spec {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .spec dd + dt {
    margin-top: var(--row);
  }
}

/* --- Long-form documents (privacy, support) ------------------------------- */

.doc {
  max-width: 68ch;
}

.doc h1::before {
  content: "# ";
  color: var(--accent);
}

.doc .doc-meta {
  color: var(--fg-dim);
}

.doc h2 {
  margin-top: var(--block);
  margin-bottom: var(--row);
}

.doc h2::before {
  content: "## ";
  color: var(--accent);
}

/* ### headings sit directly on top of their text, a blank row above. */
.doc h3 {
  margin-top: var(--row);
}

.doc h3::before {
  content: "### ";
  color: var(--fg-dim);
}

.doc ul,
.doc ol {
  padding-left: 3ch;
}

.callout {
  margin-block: calc(var(--row) + var(--inset)) var(--inset);
  padding: var(--row) 2ch;
  border-left: 4px solid var(--aqua);
  background: var(--bg-soft);
}

.callout p {
  margin: 0;
}

.toc {
  margin-top: var(--row);
}

.toc ol {
  padding-left: 3ch;
  columns: 2 26ch;
  column-gap: 4ch;
}

.contact-card {
  margin-top: calc(var(--row) + var(--inset));
}

.contact-email {
  margin-top: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* --- FAQ ------------------------------------------------------------------ */

details {
  border-top: 1px dashed var(--line-strong);
  padding-block: calc(var(--row) / 2);
}

details:last-of-type {
  border-bottom: 1px dashed var(--line-strong);
}

summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--fg-strong);
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "[+] ";
  color: var(--accent);
}

details[open] > summary::before {
  content: "[-] ";
}

details > :not(summary) {
  color: var(--fg-muted);
}

/* --- Footer: the end of the terminal session ------------------------------ */

.site-footer {
  color: var(--fg-muted);
}

.site-footer .wrap {
  padding-block: 0 var(--block);
}

.term + .term {
  margin-top: var(--block);
}

.term p + p {
  margin-top: 0;
}

.theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3ch;
}

.theme-picker button {
  font: inherit;
  color: var(--fg-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.theme-picker button::before {
  content: "( ) ";
  white-space: pre;
  color: var(--fg-dim);
}

.theme-picker button:hover {
  color: var(--fg-strong);
}

.theme-picker button[aria-pressed="true"] {
  color: var(--fg-strong);
  font-weight: 700;
}

.theme-picker button[aria-pressed="true"]::before {
  content: "(*) ";
  color: var(--accent);
}

/* --- 404 ------------------------------------------------------------------ */

.screen pre {
  font: inherit;
  margin: 0;
  white-space: pre-wrap;
}

.screen .err {
  color: var(--red);
}

.screen > * + * {
  margin-top: var(--row);
}

.screen > .prompt + * {
  margin-top: 0;
}