replace background with ascii sakura side art

css/style.css

@@ -187,61 +187,77 @@ button {
   color: var(--muted);
 }
 
-/* ── sky ────────────────────────────────────────────────────────────────
-   Generated, not photographed. tools/background.py renders every style into
-   img/bg/; inc/header.php enumerates that directory and emits one custom
-   property per style, so --bg-img follows html[data-bg]. Only the matching
-   rule's url() is fetched. Each is Bayer ordered-dithered to a few grey
-   levels and upscaled with pixelated rendering so the cells stay crunchy.
-   Regenerate everything:  python tools/background.py all */
-:root {
-  --bg: #060606;
-  /* opacity of the text-column scrim; raise for busier background styles */
-  --scrim: .82;
+/* ── side art ───────────────────────────────────────────────────────────
+   Full-height sakura in both margins: colored ASCII art (inc/art/left.html
+   and right.html, 104x88 characters), mirrored so the branches hang in from
+   the outer corners. Hidden when there's no margin. */
+
+/* The art is drawn for .6em-wide characters; system monospaces range from
+   .5em up, which squashes it. So it gets its own: JetBrains Mono's printable
+   ASCII (OFL), about 4.5 KB. */
+@font-face {
+  font-family: sideart;
+  src: url(sideart.woff2) format("woff2");
 }
 
-body { position: relative; }
-
-/* background layer */
-body::before {
-  content: "";
+.side {
   position: fixed;
-  inset: 0;
+  top: 0;
   z-index: -2;
-  background: #060606 var(--bg-img) center center / cover no-repeat;
-  image-rendering: pixelated;
+  margin: 0;
+  max-width: calc(50% - 360px);
+  overflow: hidden;
+  /* 88 rows at a 1.2 line fill the height */
+  font: calc(100vh / 105.6) / 1.2 sideart, monospace;
+  opacity: .85;
+  pointer-events: none;
+  user-select: none;
 }
+.side i { font-style: normal; }
+.side-left { left: 0; }
+/* rtl only so the right panel clips on its inner edge; the art itself stays
+   ltr, or the bidi algorithm reorders runs of punctuation */
+.side-right { right: 0; direction: rtl; }
+.side-right > span { direction: ltr; unicode-bidi: isolate; }
+.side .a0 { color: #8c6068; }
+.side .a1 { color: #a07076; }
+.side .a2 { color: #ffb0cc; }
+.side .a3 { color: #ff96be; }
+.side .a4 { color: #f678ac; }
+.side .a5 { color: #ffd4e4; }
+.side .a6 { color: #e86098; }
+.side .a7 { color: #ffecbe; }
 
-/* Readability scrim + diagonal hatch.
-   The first layer is a feathered vertical band, ~880px wide and centred on
-   the 680px text column, sitting above the artwork (z-index -2) but below
-   the content. It gives every background style a consistent dark bed to
-   read against instead of relying on each one being quiet in the middle,
-   and because the edges fade out there is no visible panel or card. */
-body::after {
+/* the column's shadow: the art fades out under it instead of stopping dead
+   beside the text. Eased falloff, as wide as about a third of the margin. */
+body::before {
   content: "";
   position: fixed;
   inset: 0;
   z-index: -1;
   pointer-events: none;
-  background:
-    linear-gradient(90deg,
-      transparent 0%,
-      rgba(4, 4, 4, var(--scrim)) 14%,
-      rgba(4, 4, 4, var(--scrim)) 86%,
-      transparent 100%),
-    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(4, 4, 4, .32), transparent 82%),
-    repeating-linear-gradient(-45deg, rgba(240, 240, 240, .045) 0 1px, transparent 1px 8px);
-  background-size: 880px 100%, auto, auto;
-  background-position: center top, center, center;
-  background-repeat: no-repeat, no-repeat, repeat;
+  --l: calc(50% - 340px);
+  --r: calc(50% + 340px);
+  --fade: clamp(60px, (100vw - 680px) * .16, 180px);
+  background: linear-gradient(90deg,
+    transparent calc(var(--l) - var(--fade)),
+    color-mix(in srgb, var(--bg) 22%, transparent) calc(var(--l) - var(--fade) * .75),
+    color-mix(in srgb, var(--bg) 55%, transparent) calc(var(--l) - var(--fade) * .5),
+    color-mix(in srgb, var(--bg) 85%, transparent) calc(var(--l) - var(--fade) * .25),
+    var(--bg) var(--l) var(--r),
+    color-mix(in srgb, var(--bg) 85%, transparent) calc(var(--r) + var(--fade) * .25),
+    color-mix(in srgb, var(--bg) 55%, transparent) calc(var(--r) + var(--fade) * .5),
+    color-mix(in srgb, var(--bg) 22%, transparent) calc(var(--r) + var(--fade) * .75),
+    transparent calc(var(--r) + var(--fade)));
 }
 
-/* cards sat on flat #161616 before; let the sky read through them */
-.status-card,
-.spotify-card,
-.post-body pre { background-color: rgba(6, 6, 6, .66); }
-input, textarea { background: rgba(6, 6, 6, .66); }
+@media (max-width: 1280px) {
+  .side, body::before { display: none; }
+}
+
+@media print, (forced-colors: active) {
+  .side, body::before { display: none; }
+}
 
 /* guestbook sign button */
 .btn-sign {