/* ============================================================
   Bozits LLC studio site
   Design tokens first, then components. No stray hex below the
   token block: everything references a custom property.

   Identity: "quiet workshop". Warm paper in light, graphite in
   dark, one verdigris accent, system type with a monospace voice
   for labels. Deliberately unlike Chore Bear (honey) and
   Echo Flight (pixel navy) so the studio reads as its own thing.
   ============================================================ */

/* ---------- Tokens: color (light) -------------------------- */
:root {
  --bg:          #f7f6f3;
  --surface:     #ffffff;
  --surface-2:   #efeee9;
  --border:      #e0ded6;
  --border-firm: #c9c6bb;
  --text:        #16191c;
  --muted:       #4c5257;
  --accent:      #0f6e64;
  --accent-ink:  #ffffff;
  --focus:       #0f6e64;

  /* Per-product accents. Decorative only (rules, dots, pills):
     never the color of body text. */
  --p-chorebear:  #b4721c;
  --p-echoflight: #2f6fb5;
  --p-wakeproof:  #8a4fd1;
  --p-afterquack: #b0561a;

  /* ---------- Tokens: type ---------- */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-eyebrow: 0.75rem;
  --fs-small:   0.875rem;
  --fs-nav:     var(--fs-small);
  --fs-body:    1rem;
  --fs-lede:    1.1875rem;
  --fs-h3:      1.125rem;
  --fs-h2:      1.5rem;
  --fs-h1:      2.25rem;

  /* ---------- Tokens: space and shape ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  --radius:    14px;
  --radius-sm: 8px;
  --maxw:      62rem;
  --rule:      1px;
}

/* ---------- Tokens: color (dark) --------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #101315;
    --surface:     #181c1f;
    --surface-2:   #1f2428;
    --border:      #2c3237;
    --border-firm: #3d454b;
    --text:        #eceef0;
    --muted:       #9aa4ab;
    --accent:      #5fd3c4;
    --accent-ink:  #101315;
    --focus:       #5fd3c4;

    --p-chorebear:  #f2b857;
    --p-echoflight: #4ec0ff;
    --p-wakeproof:  #b79bff;
    --p-afterquack: #f0a860;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;

  /* Keep the footer at the bottom on short pages (404, privacy). */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
.site-foot { flex-shrink: 0; }

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

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- Layout helpers ---------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.section { padding-block: var(--s-8); }
.section + .section { border-top: var(--rule) solid var(--border); }

.section__head { max-width: 42rem; margin-bottom: var(--s-6); }
.section__title { font-size: var(--fs-h2); }
.section__lede { color: var(--muted); margin-top: var(--s-3); }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}

/* ---------- Skip link --------------------------------------- */
.skip {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  z-index: 20;
  transform: translateY(-200%);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: var(--fs-small);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip:focus { transform: translateY(0); }

/* ---------- Header ------------------------------------------ */
.site-head {
  border-bottom: var(--rule) solid var(--border);
  background: var(--bg);
}
.site-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-4);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 148px; height: auto; }

.site-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-nav);
}
.site-nav a:hover { color: var(--text); text-decoration: underline; }

/* ---------- Hero -------------------------------------------- */
.hero { padding-block: var(--s-8) var(--s-7); }
.hero__inner { max-width: 44rem; }
.hero h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; }
.hero__lede {
  font-size: var(--fs-lede);
  color: var(--muted);
  margin-top: var(--s-5);
}
.hero__rule {
  width: 64px;
  height: 4px;
  margin-top: var(--s-6);
  border-radius: 99px;
  background: var(--accent);
}

/* ---------- Card grid --------------------------------------- */
.grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* The product grid holds exactly four cards, and the page max width
   caps auto fit at three columns, which left the fourth card alone on
   a second row. The count is fixed, so declare two equal columns and
   get a 2 by 2 block instead, one column below 40rem. The values grid
   (three items) keeps the auto fit above. */
.grid:not(.values) { grid-template-columns: 1fr; }

@media (min-width: 40rem) {
  .grid:not(.values) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--surface);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-5);
  overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--card-accent, var(--border-firm));
}
.card:hover { border-color: var(--border-firm); transform: translateY(-2px); }

.card--chorebear  { --card-accent: var(--p-chorebear); }
.card--echoflight { --card-accent: var(--p-echoflight); }
.card--wakeproof  { --card-accent: var(--p-wakeproof); }
.card--afterquack { --card-accent: var(--p-afterquack); }

.card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-1);
}
.card__title { font-size: var(--fs-h3); }
.card__body { color: var(--muted); font-size: var(--fs-small); flex: 1 1 auto; }

.pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border: var(--rule) solid var(--border);
  border-radius: 99px;
  padding: 2px var(--s-3);
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--card-accent, var(--border-firm));
}

.card__link {
  font-family: var(--mono);
  font-size: var(--fs-small);
  color: var(--accent);
  text-decoration: none;
  align-self: flex-start;
}
.card__link:hover { text-decoration: underline; }
.card__link .arrow { font-family: var(--sans); }

/* ---------- Values ------------------------------------------ */
.values { counter-reset: value; }
.value {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--border-firm);
  border-radius: 0;
  padding-top: var(--s-4);
}
.value__n {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  color: var(--muted);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: var(--s-2);
}
.value h3 { font-size: var(--fs-h3); }
.value p { color: var(--muted); font-size: var(--fs-small); margin-top: var(--s-3); }

/* ---------- Contact ----------------------------------------- */
.contact__mail {
  display: inline-block;
  margin-top: var(--s-5);
  font-family: var(--mono);
  font-size: var(--fs-lede);
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.contact__mail:hover { border-bottom-width: 3px; }

/* ---------- Prose (privacy, 404) ---------------------------- */
.prose { max-width: 40rem; padding-block: var(--s-7) var(--s-8); }
.prose h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; }
.prose h2 { font-size: var(--fs-h2); margin-top: var(--s-7); }
.prose p, .prose ul { color: var(--muted); margin-top: var(--s-4); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--s-2); }
.prose .updated {
  font-family: var(--mono);
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: var(--s-3);
}

.notfound { text-align: left; }
.notfound .code {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}

.btn {
  display: inline-block;
  margin-top: var(--s-6);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: var(--fs-small);
  text-decoration: none;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-sm);
}
.btn:hover { filter: brightness(1.08); }

/* ---------- Footer ------------------------------------------ */
.site-foot {
  border-top: var(--rule) solid var(--border);
  background: var(--surface-2);
  padding-block: var(--s-6);
  font-size: var(--fs-small);
  color: var(--muted);
}
.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-foot a { color: var(--muted); text-decoration: underline; }
.site-foot a:hover { color: var(--text); }

/* ---------- Narrow screens (down to 360px) ------------------ */
@media (max-width: 30rem) {
  :root {
    --fs-h1:   1.875rem;
    --fs-h2:   1.3125rem;
    --fs-lede: 1.0625rem;
    --fs-nav:  0.8125rem;
    --s-8:     3rem;
  }
  .wrap { padding-inline: var(--s-4); }
  .brand img { width: 132px; }

  /* The nav drops to its own full width row under the wordmark. A
     var(--s-5) column gap pushed the four links past 360px, so tighten
     the gap and let them spread across the row instead. The gap is only
     the wrap floor here: space-between still spreads the links edge to
     edge, so var(--s-2) buys headroom without closing the visual gaps.

     --sans is a system stack, so the same four labels render at
     different widths on San Francisco, Segoe UI, and Roboto. The row has
     to survive the widest of them, not just the one it was measured on,
     which is why --fs-nav drops a step above. */
  .site-nav {
    margin-left: 0;
    width: 100%;
    gap: var(--s-2);
    justify-content: space-between;
  }
  /* Smaller type would shrink the touch target, so widen the padding to
     pay it back: 13px text at line height 1.65 is 21.45px, plus var(--s-4)
     top and bottom, which is 53.45px. Comfortably past the 44px floor,
     and taller than the 47px it replaces. */
  .site-nav a { padding-block: var(--s-4); }
}

/* ---------- Motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
}