/* Fruitzing's design language, on the web: fat black borders, hard offset
   shadows, flat saturated colour, no gradients. Fonts are self-hosted from
   the app's own assets — this site makes no third-party requests at all. */
@font-face { font-family: Fredoka; src: url(fonts/Fredoka-Bold.ttf); font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url(fonts/Inter-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(fonts/Inter-Bold.ttf); font-weight: 700; font-display: swap; }

:root {
  --red: #E52521; --yellow: #F3D403; --green: #55AA53; --blue: #1A6EB6;
  --ink: #111318; --paper: #ffffff;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ink); color: #fff;
  font-family: Inter, system-ui, sans-serif; line-height: 1.6;
  background-image:
    radial-gradient(60vw 60vw at 12% 8%, rgba(229,37,33,.30), transparent 60%),
    radial-gradient(55vw 55vw at 88% 22%, rgba(26,110,182,.30), transparent 60%),
    radial-gradient(60vw 60vw at 50% 100%, rgba(85,170,83,.26), transparent 60%);
  background-attachment: fixed;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 28px 20px 72px; }
.chip {
  display: inline-block; background: var(--red); color: #fff;
  font-family: Fredoka, sans-serif; font-weight: 700; letter-spacing: .5px;
  padding: 6px 16px; border: 3px solid #fff; border-radius: 999px;
  box-shadow: 0 3px 0 #000; transform: rotate(-1.5deg); text-decoration: none;
}
h1 { font-family: Fredoka, sans-serif; font-size: clamp(34px, 7vw, 56px); line-height: 1.05; margin: 34px 0 10px; }
h2 { font-family: Fredoka, sans-serif; font-size: clamp(20px, 4vw, 26px); margin: 34px 0 10px; }
h3 { font-family: Fredoka, sans-serif; font-size: 17px; margin: 22px 0 6px; }
.lede { font-size: clamp(16px, 2.4vw, 19px); color: #d7dbe4; margin: 0 0 26px; }
.cta {
  display: inline-block; background: var(--yellow); color: #000;
  font-weight: 700; font-size: 18px; text-decoration: none;
  padding: 15px 34px; border: 4px solid #000; border-radius: 999px;
  box-shadow: 0 6px 0 #000;
}
.cta:active { transform: translateY(4px); box-shadow: 0 2px 0 #000; }
.card {
  background: var(--paper); color: #111; border: 4px solid #000;
  border-radius: 22px; box-shadow: 0 8px 0 #000; padding: 22px 24px; margin: 26px 0;
}
.card h2, .card h3 { color: #111; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 26px 0; }
.tile { background: rgba(255,255,255,.07); border: 3px solid rgba(255,255,255,.16); border-radius: 18px; padding: 18px; }
.tile b { font-family: Fredoka, sans-serif; display: block; margin-bottom: 4px; font-size: 17px; }
ul { padding-left: 20px; } li { margin: 6px 0; }
a { color: var(--yellow); }
.card a { color: #0a58a8; }
footer { margin-top: 46px; padding-top: 20px; border-top: 2px solid rgba(255,255,255,.14); color: #aeb4c0; font-size: 14px; }
footer a { color: #fff; margin-right: 16px; }
.meta { color: #8d93a0; font-size: 13px; }