/* Kettlebit — site styles. Fonts are self-hosted. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  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: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("/assets/fonts/pixelify-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #F3ECE1;
  --surface: #FBF7F0;
  --ink: #2A211C;
  --muted: #6B5B4E;
  --accent: #C8643B;
  --link-hover: #A64E2E;
  --line: #E2D6C4;
  --night: #2A211C;
  --night-text: #EDE3D6;
  --night-muted: #B9A794;
  --flame: #3F7FD0;
  --radius: 20px;
  --max: 1080px;
  --gutter: clamp(16px, 4vw, 40px);
  --pixel: linear-gradient(var(--accent), var(--accent));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---- Logo ---- */
.kb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.kb-logo { display: block; width: 100%; height: 100%; overflow: visible; }
.kb-pixels, .kb-steam { fill: var(--accent); }
.kb-flame { fill: var(--flame); }

/* Three burner lights under the header kettle, glowing in turn */
.kb-logo--live .kb-flame rect { animation: kb-flame 2.4s ease-in-out infinite; }
.kb-logo--live .kb-flame rect:nth-child(2) { animation-duration: 2.9s; animation-delay: -0.9s; }
.kb-logo--live .kb-flame rect:nth-child(3) { animation-duration: 2.2s; animation-delay: -1.6s; }
@keyframes kb-flame {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* The kettle's visual weight sits low in its square (steam takes the top),
   so the wordmark is nudged down to line up with the body, and the gap is tight. */
.brand { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand .kb-logo { width: 44px; height: 44px; }
.wordmark { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; transform: translateY(0.28em); }
.wordmark .bit { font-family: "Pixelify Sans", ui-monospace, monospace; color: var(--accent); letter-spacing: 0; }

/* ---- Header ---- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; }
/* the animated logo lives here, so it is larger than in the footer */
.site-header .brand .kb-logo { width: 52px; height: 52px; }
.site-header .wordmark { font-size: 30px; }
@media (min-width: 820px) {
  .site-header { padding-top: 28px; }
  .site-header .brand .kb-logo { width: 64px; height: 64px; }
  .site-header .wordmark { font-size: 36px; }
}
.nav { display: flex; flex-wrap: wrap; gap: 4px clamp(14px, 3vw, 28px); font-size: 15px; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--ink); }

/* Three pixels, like the shine on the kettle */
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background: var(--pixel) 0 0 / 5px 5px no-repeat, var(--pixel) 6px 0 / 5px 5px no-repeat, var(--pixel) 0 6px / 5px 5px no-repeat;
}

/* ---- Home ---- */
.hero { padding-top: clamp(24px, 7vw, 88px); padding-bottom: clamp(48px, 9vw, 112px); }
/* Faint grid of square "pixels" in the empty right part of the first screen.
   It stays inside the hero, so it never reaches the header logo or the next section,
   and it is hidden on phones, where it would sit under the text. */
@media (min-width: 640px) {
  .hero { position: relative; }
  .hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 40%;
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect width='2' height='2' fill='%232A211C' fill-opacity='0.24'/%3E%3C/svg%3E");
    -webkit-mask-image: radial-gradient(ellipse 55% 50% at 60% 50%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 55% 50% at 60% 50%, #000 30%, transparent 75%);
    pointer-events: none;
  }
}
.hero h1 { margin: 0 0 20px; font-size: clamp(44px, 8.5vw, 92px); line-height: 0.98; font-weight: 600; letter-spacing: -0.04em; }
.hero .lead { margin: 0; max-width: 32ch; font-size: clamp(18px, 2.2vw, 22px); color: var(--muted); }

.section { padding-top: clamp(48px, 8vw, 88px); padding-bottom: clamp(48px, 8vw, 88px); border-top: 1px solid var(--line); }
.section h2 { margin: 0 0 20px; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; }
.section p { margin: 0 0 16px; max-width: 60ch; }
.section p:last-child { margin-bottom: 0; }
@media (min-width: 820px) {
  .split { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
}

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); }
.card h3 { margin: 0 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 13px; color: var(--muted); }
.pill::before { content: ""; width: 6px; height: 6px; background: var(--accent); }

/* ---- Footer ---- */
.site-footer { margin-top: clamp(24px, 4vw, 48px); padding-top: 40px; padding-bottom: 32px; background: var(--night); color: var(--night-text); }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: var(--night-text); }
.site-footer .brand .kb-logo { width: 34px; height: 34px; }
.site-footer .wordmark { font-size: 21px; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.company { margin: 24px 0 0; font-size: 13px; color: var(--night-muted); }
.company:empty { display: none; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 20px 0 0; padding-top: 20px; border-top: 1px solid rgba(237, 227, 214, 0.14); font-size: 13px; color: var(--night-muted); }
.footer-bottom a { color: var(--night-muted); }

/* ---- Long-form pages: privacy, legal, 404 ---- */
.doc { max-width: 760px; padding-top: clamp(24px, 6vw, 64px); padding-bottom: 64px; }
.doc h1 { margin: 0 0 8px; font-size: clamp(36px, 6vw, 56px); line-height: 1.05; font-weight: 600; letter-spacing: -0.035em; }
.doc .meta { margin: 0 0 40px; font-size: 15px; color: var(--muted); }
.doc h2 { margin: 40px 0 12px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.doc p, .doc li { max-width: 68ch; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 24px 0 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kb-logo--live .kb-flame rect { animation: none; }
}