:root { --ink: #24231f; --sticker: #1f5a2a; --cream: #eef1ea; }

/* ground: dim grey wall, lit from above */
html { background: #c3c0ba; }
body {
  margin: 0; position: relative; min-height: 100svh; color: var(--ink);
  font: 400 15px/1.5 Verdana, Tahoma, "DejaVu Sans", sans-serif;
  background:
    radial-gradient(90% 80% at 50% 40%, transparent 35%, rgba(20,18,14,.24)),
    radial-gradient(120% 90% at 50% 35%, #cbc8c2, #b8b5af);
}
/* wool: felted mottle underneath, fine stretched fibres on top */
body::before, body::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
body::before {
  opacity: .3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .05 0 0 0 .45 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0/600px 600px;
}
body::after {
  opacity: .34; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='120'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .18' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .94 0 0 0 0 .9 0 0 0 .6 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0/360px 90px;
}

/* type */
main {
  position: relative; width: min(44em, 100% - 3rem); margin: 0 auto; padding: 16vh 0 12vh;
  display: grid; grid-template-columns: minmax(0, 32em) 1fr; gap: 4rem; align-items: start;
}
h1 { font-size: 1.35rem; margin: 0 0 1.4rem; }
p { margin: 0 0 1.2em; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgba(36,35,31,.4); }
a:hover { text-decoration-color: currentColor; }
::selection { background: var(--sticker); color: var(--cream); }
footer { margin-top: 3rem; font-size: .85rem; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* the clover: soft focus, lying on the wall, with a story sticker that never quite resolves */
.clover { display: block; margin: 7.5rem 0 0 auto; width: 160px; text-decoration: none; }
figure { position: relative; margin: 0; }
figure svg { display: block; width: 100%; overflow: visible; filter: blur(1px) drop-shadow(2px 6px 7px rgba(20,18,14,.34)); }
figcaption {
  position: absolute; right: -1rem; top: -1.6rem; padding: .15em .5em; white-space: nowrap;
  font: 400 .78rem/1.5 system-ui, sans-serif; color: var(--cream); background: var(--sticker);
  filter: blur(.9px); animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { filter: blur(.7px); } 50% { filter: blur(2px); } }

/* pages do not scroll where they fit; phones and short windows still can */
@media (min-width: 900px) and (min-height: 800px) { .home, .home body { height: 100%; overflow: hidden; } .home main { padding: 12vh 0 0; } }

@media (prefers-reduced-motion: reduce) { figcaption { animation: none; } }
@media (forced-colors: active) { body::before, body::after { display: none; } figure svg, figure svg g, figcaption { filter: none; animation: none; } }
@media (max-width: 640px) {
  main { grid-template-columns: 1fr; gap: 2rem; padding-top: 11vh; }
  .clover { width: 130px; margin: 1.5rem 1rem 0 auto; }
}