@font-face {
  font-family: "Fredoka";
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/assets/fonts/fredoka.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("/assets/fonts/nunito.woff2") format("woff2");
}

:root {
  --color-surface: #ffffff;
  --color-text:    #2e2a26;
  --color-muted:   #6b6b6b;
  --color-primary: #2e2a26;
  --color-primary-dark: #1c1916;
  --color-accent:  #ff7a3d;
  --color-link:    #1a6dc0;

  --sky-top:    #56abe6;
  --sky-bottom: #cbeafb;
  --sky-ground: #83c46f;

  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, sans-serif;

  --border-chunky: 3px;
  --radius:        8px;
  --radius-panel:  18px;
  --shadow-chunky: 6px 6px 0 var(--color-text);

  --measure: 44rem;
  --grass-h: 52vh;

  --hills: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 280' preserveAspectRatio='none'><path fill='%2383c46f' d='M0,34 C160,20 340,48 560,32 C770,18 980,46 1200,30 L1200,280 L0,280 Z'/></svg>");
  --clouds: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none'><rect width='1200' height='58' fill='%23ffffff'/><circle cx='40' cy='58' r='74' fill='%23ffffff'/><circle cx='165' cy='50' r='92' fill='%23ffffff'/><circle cx='300' cy='60' r='68' fill='%23ffffff'/><circle cx='430' cy='50' r='94' fill='%23ffffff'/><circle cx='560' cy='60' r='72' fill='%23ffffff'/><circle cx='700' cy='48' r='96' fill='%23ffffff'/><circle cx='845' cy='60' r='70' fill='%23ffffff'/><circle cx='985' cy='52' r='90' fill='%23ffffff'/><circle cx='1130' cy='58' r='78' fill='%23ffffff'/></svg>");
}

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

html {
  font-family: var(--font-body);
  line-height: 1.65;
  color: var(--color-text);
}

body {
  margin: 0;
  min-height: 100svh;
  padding: 2.5rem 1.25rem 4rem;
  background:
    var(--clouds) top / 100% clamp(80px, 13vh, 145px) no-repeat,
    var(--hills) bottom / 100% var(--grass-h) no-repeat,
    linear-gradient(var(--sky-top), var(--sky-bottom) 60%);
  background-attachment: fixed;
}

.ground-texture {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--grass-h);
  z-index: 0;
  pointer-events: none;
  background-image: repeating-conic-gradient(rgb(0 0 0 / 0.06) 0 25%, transparent 0 50%);
  background-size: 90px 90px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 28%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 28%, #000 100%);
}

.page {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: var(--measure);
}

.slime-scatter {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.slime-scatter .slime {
  position: absolute;
  width: clamp(95px, 9vw, 150px);
  filter: drop-shadow(2px 3px 0 rgb(46 42 38 / 0.18));
}
/* Left gutter */
.slime-scatter .s-puddle   { left: 2.5vw; bottom: 4vh;  transform: rotate(-3deg); }
.slime-scatter .s-squircle { left: 7.5vw; bottom: 16vh; width: 115px; transform: rotate(2deg); }
.slime-scatter .s-splat    { left: 1vw;   bottom: 26vh; width: 100px; transform: rotate(-2deg); }
/* Right gutter */
.slime-scatter .s-balloon  { right: 3vw;  bottom: 4vh;  transform: rotate(2deg); }
.slime-scatter .s-star     { right: 8.5vw; bottom: 15vh; transform: rotate(-3deg); }
.slime-scatter .s-spike    { right: 1.5vw; bottom: 26vh; width: 100px; transform: rotate(2deg); }

@media (max-width: 1100px) {
  .slime-scatter { display: none; }
}

a { color: var(--color-link); }

.site-header {
  text-align: center;
  margin: 0 auto 2rem;
  max-width: fit-content;
  background: var(--color-surface);
  border: var(--border-chunky) solid var(--color-text);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-chunky);
  padding: 1rem 1.6rem 1.1rem;
}

.site-title {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
}

.site-tagline {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-accent);
  margin: 0.35rem 0 0;
  font-size: clamp(0.95rem, 3vw, 1.15rem);
}

.site-content {
  background: var(--color-surface);
  border: var(--border-chunky) solid var(--color-text);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-chunky);
  padding: 2.25rem 2rem;
}

.post-list { list-style: none; padding: 0; margin: 0; }

.post-list-item { padding: 1.25rem 0; border-bottom: 2px dotted var(--rule, #e7e2dc); }
.post-list-item:first-child { padding-top: 0; }
.post-list-item:last-child { border-bottom: 0; padding-bottom: 0; }

.post-date {
  display: block;
  font-size: 0.8rem;
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

.post-link {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
}
.post-link:hover { color: var(--color-link); }

.site-title:hover { color: var(--color-link); }

.post-excerpt { color: var(--color-muted); margin: 0.35rem 0 0; }

/* ── Single post ────────────────────────────────────────────────────────── */
.post-header { margin-bottom: 1.75rem; }
.post-title {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 0.35rem;
  line-height: 1.15;
}
.post-meta { margin: 0; color: var(--color-muted); font-size: 0.9rem; }

.post-content h1,
.post-content h2,
.post-content h3 { font-family: var(--font-display); line-height: 1.2; }
.post-content h2 { margin-top: 2.5rem; }

.post-content a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }

.post-content pre {
  background: #f6f3ee;
  border: 2px solid var(--color-text);
  padding: 1rem;
  border-radius: var(--radius);
  overflow-x: auto;
}
.post-content code { font-size: 0.9em; }
.post-content :not(pre) > code {
  background: #f6f3ee;
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.post-content blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 1.1rem;
  border-left: var(--border-chunky) solid var(--color-accent);
  color: var(--color-muted);
}

.post-content img { max-width: 100%; height: auto; border-radius: var(--radius); }

.post-content figure {
  margin: 1.75rem 0;
  text-align: center;
}
.post-content figure img { display: block; margin: 0 auto; }
.post-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-muted);
  font-style: italic;
}

.colour-swatch {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border-radius: 3px;
  border: 1.5px solid rgb(0 0 0 / 0.25);
  vertical-align: middle;
  margin-right: 0.15em;
  position: relative;
  top: -0.05em;
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px dotted #e7e2dc;
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.post-nav__prev { text-align: left; }
.post-nav__next { text-align: right; }

.post-nav__home {
  text-align: center;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}
.post-nav__home:hover { color: var(--color-link); }

.post-nav__label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.15rem;
}

.post-nav__link {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
}
.post-nav__link:hover { color: var(--color-link); }

.signup-cta__button {
  display: block;
  width: fit-content;
  margin: 0 auto 1.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  background: var(--color-accent);
  color: var(--color-text);
  border: var(--border-chunky) solid var(--color-text);
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
}
.signup-cta__button {
  box-shadow: var(--shadow-chunky);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.signup-cta__button:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--color-text);
}
.signup-cta__button:active {
  transform: translate(6px, 6px);
  box-shadow: none;
}

.site-footer {
  margin-top: 1.75rem;
  text-align: center;
  color: var(--color-text);
  font-size: 0.85rem;
}
.site-footer p {
  display: inline-block;
  margin: 0;
  background: var(--color-surface);
  border: var(--border-chunky) solid var(--color-text);
  border-radius: 999px;
  box-shadow: var(--shadow-chunky);
  padding: 0.5rem 1.1rem;
}
.site-footer a { color: inherit; }

@media (max-width: 480px) {
  .site-content { padding: 1.5rem 1.25rem; }
}