/* sidecat — a green field, a black panel, the statement, the cat. */

:root {
  --green: #06483e;
  --panel: #18221e;
  --ink: #e4eae6;
  --line: rgba(228, 234, 230, 0.18);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(18px, 4.5vw, 68px);   /* the green border */
  background: var(--green);
  display: grid;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
  background: var(--panel);
  border-radius: clamp(16px, 2.8vw, 38px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(28px, 4vw, 44px);
  padding: clamp(24px, 6vw, 72px);
}

.statement {
  max-width: 34rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(20px, 3.5vw, 32px);
  color: var(--ink);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.6;
}

.statement p { margin: 0 0 1em; }
.statement p:last-child { margin-bottom: 0; }
.statement ul { margin: 0 0 1em; padding-left: 1.2em; }
.statement li { margin-bottom: 0.6em; }
.statement li:last-child { margin-bottom: 0; }

/* The walking cat is a transparent 192x208 PNG, so it sits directly on the
   panel with no tile edge. Sized off its native height to stay sharp. */
main img {
  display: block;
  height: min(280px, 42vmin);
  width: auto;
}