/* =====================================================================================================
   CHRISTMAS COSTUME for riversiderat.com (made 24 Oct 2026 for Phillip).
   A page "wears" it with two lines in its <head>:
       <link rel="stylesheet" href="christmas.css">   and   <script src="christmas.js" defer></script>
   AFTER CHRISTMAS: delete those two lines (or these two files) and the page is back to normal - nothing else changes.
   Same look as christmas-gifts.html: string of lights, a tree by the title, pine garland, snow dots, marquee lights
   around every book, candy canes, and pale pine-green / candy-cane-pink cards. Decoration only - nothing depends on color.
   ===================================================================================================== */

body { background-image: radial-gradient(#ffffff 1.6px, transparent 1.8px), radial-gradient(#ffffff 1.1px, transparent 1.3px);
       background-size: 70px 70px, 43px 43px; background-position: 0 0, 21px 30px; }

/* string of lights under the top bar (christmas.js adds the bulbs) */
.xmas-lights { position: relative; height: 54px; overflow: hidden; background: #0f2a1d;
               display: flex; justify-content: space-around; align-items: flex-start; padding: 0 10px; }
.xmas-lights::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='22'%3E%3Cpath d='M0 4 Q30 22 60 4' fill='none' stroke='%23324d3c' stroke-width='2.5'/%3E%3C/svg%3E") repeat-x; }
.xmas-bulb { position: relative; top: 13px; width: 13px; height: 22px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
             animation: xmas-twinkle 2.4s ease-in-out infinite; }
.xmas-bulb::before { content: ""; position: absolute; top: -5px; left: 3px; width: 7px; height: 6px; background: #8a8f86; border-radius: 2px; }
.xmas-bulb:nth-child(4n+1) { background: #e8312f; box-shadow: 0 0 10px 3px rgba(232,49,47,.7); }
.xmas-bulb:nth-child(4n+2) { background: #2fbf5b; box-shadow: 0 0 10px 3px rgba(47,191,91,.7); animation-delay: .6s; }
.xmas-bulb:nth-child(4n+3) { background: #ffcf3f; box-shadow: 0 0 10px 3px rgba(255,207,63,.75); animation-delay: 1.2s; }
.xmas-bulb:nth-child(4n+4) { background: #3fa3ff; box-shadow: 0 0 10px 3px rgba(63,163,255,.7); animation-delay: 1.8s; }
.xmas-bulb:nth-child(even) { top: 17px; }
@keyframes xmas-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* the tree beside the page title + the garland under it (christmas.js adds them) */
.xmas-tree { width: 1.6em; height: 2em; vertical-align: -0.45em; margin-right: 10px; }
.page-title { color: #b3201c; }
.xmas-garland { height: 30px; margin: 10px auto 18px; max-width: 900px; border-radius: 16px;
  background:
    radial-gradient(circle at 50% 60%, #e8312f 0 6px, transparent 7px) 0 0 / 120px 30px repeat-x,
    radial-gradient(circle at 50% 60%, #ffcf3f 0 6px, transparent 7px) 40px 0 / 120px 30px repeat-x,
    radial-gradient(circle at 50% 60%, #3fa3ff 0 6px, transparent 7px) 80px 0 / 120px 30px repeat-x,
    repeating-linear-gradient(60deg, #1d5a35 0 6px, #2a7a48 6px 12px, #164a2b 12px 18px); }

/* section headings in Christmas red and green, with a gold star */
.section-title { color: #1b5e34; border-bottom: 4px solid #c8282a; }
.section-title::before { content: "\2605  "; color: #e2a51b; }

/* the book cards: pale pine green / pale candy-cane pink, snow dots, marquee lights, candy canes */
.rig-grid { gap: 40px; padding: 16px 8px; }
.rig-card { overflow: visible; border-radius: 10px; border-color: #c9e3cd;
  background: radial-gradient(rgba(255,255,255,.9) 1.4px, transparent 1.7px) 0 0 / 22px 22px, linear-gradient(#f1f9f1, #e2f1e4); }
.rig-card:nth-child(even) { border-color: #efc9c6;
  background: radial-gradient(rgba(255,255,255,.9) 1.4px, transparent 1.7px) 0 0 / 22px 22px, linear-gradient(#fff4f3, #fbe2e0); }
.rig-card img, .book-grid .rig-card img { background: transparent; border-radius: 10px 10px 0 0; border-bottom-color: rgba(0,0,0,.08); }
.rig-card p { color: #3d4a42; }
.rig-card::after { content: ""; position: absolute; inset: -11px; border-radius: 16px; padding: 9px; pointer-events: none;
  background:
    radial-gradient(circle, #ffd84a 0 3.4px, rgba(255,216,74,.35) 4.6px, transparent 5.2px) 0 0 / 18px 18px,
    radial-gradient(circle, #ff3b30 0 3.4px, rgba(255,59,48,.35) 4.6px, transparent 5.2px) 9px 9px / 18px 18px,
    #2a1a10;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: xmas-chase 0.9s steps(2) infinite; }
@keyframes xmas-chase { to { background-position: 18px 0, 27px 9px, 0 0; } }
.rig-card::before { content: ""; position: absolute; top: -34px; left: -16px; width: 34px; height: 74px; z-index: 4; pointer-events: none;
  transform: scaleX(-1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 74'%3E%3Cpath d='M9 70 V20 A8.5 8.5 0 0 1 26 20 V27' fill='none' stroke='%23000' stroke-opacity='.18' stroke-width='9.5' stroke-linecap='round' transform='translate(1 1)'/%3E%3Cpath d='M9 70 V20 A8.5 8.5 0 0 1 26 20 V27' fill='none' stroke='%23ffffff' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M9 70 V20 A8.5 8.5 0 0 1 26 20 V27' fill='none' stroke='%23d11f26' stroke-width='8' stroke-dasharray='5 5'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,.25)); }
.rig-card:hover { transform: none; }     /* the cards stay put so the lights don't jump */

.to-top a { border-color: #c8282a; }
footer { border-top: 6px solid #c8282a; }

@media (prefers-reduced-motion: reduce) { .xmas-bulb, .rig-card::after { animation: none; } }