/* ==========================================================================
   The Literarium - seasonal looks
   Loaded on every page after site.css, but nothing here applies unless js/theme-init.js has put the season on the
   page (<html data-season="halloween">): by the calendar, or a ?season=halloween preview. Visitors can turn a
   season off with the switch beside the lamp in the header (js/season.js).

   Each season mostly re-points site.css's colour tokens (section 2 there), for the day look and for the lamp-lit
   evening look, then adds a few decorations of its own. Add the next season as another section below, give it
   dates in js/theme-init.js, and a switch icon in js/layout.js (ICON).
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   Halloween ─ the reading room after dark: ash-grey parchment by day, deep
   midnight under the lamp; pumpkin brass, charred timber, cobwebs and bats.
   ══════════════════════════════════════════════════════════════════════════ */

/* Both looks */
:root[data-season="halloween"] {
  --wood-0:  #0b070e;
  --wood-1:  #150c19;
  --wood-2:  #201226;
  --wood-3:  #2c1834;
  --leather: #3a1a2e;
  --green:   #241232;   /* the home page banner, green buttons */
  --green-2: #351a48;
  --navy:    #1c1730;
  --brass:   #e0741c;   /* pumpkin, where the brass fittings were */
  --brass-2: #f59a3a;
  --gilt:    #f6ae55;   /* candle-flame amber for the lettering */
  --cream:   #f3e6d3;
  --focus:   #f08a24;

  --chrome-ink:        #eadfd0;   /* bone */
  --chrome-ink-hover:  #ffe2b8;
  --chrome-ink-soft:   #b8a5c8;   /* lavender smoke */
  --chrome-hover:      rgba(240, 130, 40, .14);
  --chrome-line:       rgba(240, 130, 40, .35);
  --footer-ink:        #d6c9de;
  --footer-faint:      #a493b3;
  --footer-link-hover: #ffd29c;
  --hero-top:          #1b0f2a;
  --hero-bottom:       #08050d;
  --hero-glow:         rgba(255, 140, 40, .16);
  --hero-ink:          #e7dbe9;
  --mote:              rgba(255, 168, 60, .9);     /* embers instead of dust */
  --mote-glow:         rgba(255, 110, 20, .95);
  --on-accent:         #fff4e6;
  --accent-edge:       #5e2205;
  --selection-ink:     #1a0d05;
}

/* By day: parchment gone grey with ash, ink the colour of a bruise */
:root[data-season="halloween"]:not([data-theme="dark"]) {
  --paper:      #ece2d0;
  --paper-2:    #e0d3bc;
  --paper-3:    #f5ecdc;
  --ink:        #22151d;
  --ink-soft:   #4d3946;
  --ink-faint:  #75606c;
  --rule:       #b39a86;
  --rule-soft:  #d2c0ab;
  --link:       #a03f0c;
  --link-hover: #6b2605;
  --oxblood:    #b0470f;
  --oxblood-2:  #cb5915;
  --glow:       rgba(255, 140, 40, .30);
  --vignette:   rgba(60, 20, 80, .20);
}

/* By lamplight: midnight */
:root[data-season="halloween"][data-theme="dark"] {
  --paper:      #120c16;
  --paper-2:    #1a1120;
  --paper-3:    #221829;
  --ink:        #ece0cc;
  --ink-soft:   #c9b7a6;
  --ink-faint:  #9a879e;
  --rule:       #4b3554;
  --rule-soft:  #33243b;
  --link:       #f39a3c;
  --link-hover: #ffc27a;
  --oxblood:    #b8501a;
  --oxblood-2:  #d4651f;
  --glow:       rgba(255, 120, 30, .14);
  --vignette:   rgba(0, 0, 0, .5);
}

/* ---- a candle somewhere above the page: the light at the top flickers now and then ---------------------------- */
:root[data-season="halloween"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 45% at 50% -8%, rgba(255, 140, 40, .16), transparent 70%);
  animation: hw-flicker 9s ease-in-out infinite;
}
@keyframes hw-flicker {
  0%, 100% { opacity: 1; } 42% { opacity: .92; } 45% { opacity: .7; } 47% { opacity: .95; } 70% { opacity: .85; } 72% { opacity: 1; }
}

/* ---- the header: charred timber, a pumpkin glow along its edge, a cobweb in the corner and its spider --------- */
:root[data-season="halloween"] .site-header {
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55), 0 2px 16px rgba(240, 110, 20, .28), inset 0 -1px 0 rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 170, 90, .12);
}
:root[data-season="halloween"] .header-inner { position: relative; z-index: 1; }
:root[data-season="halloween"] .site-header::before {   /* the cobweb, strung across the top-left corner */
  content: ""; position: absolute; top: 0; left: 0; width: 104px; height: 104px; pointer-events: none; opacity: .55;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23ece3d6' stroke-width='.8' stroke-linecap='round'><path d='M0 0L120 0M0 0L112 42M0 0L86 86M0 0L42 112M0 0L0 120'/><path d='M24 0Q21 6 22.4 8.4Q16 13 17 17Q11 19 8.4 22.4Q5 22 0 24' /><path d='M50 0Q45 11 46.7 17.5Q36 26 35.4 35.4Q26 37 17.5 46.7Q10 45 0 50'/><path d='M78 0Q71 16 73 27.3Q57 41 55.2 55.2Q41 57 27.3 73Q16 71 0 78'/><path d='M106 0Q97 22 99.2 37.1Q78 55 75 75Q55 78 37.1 99.2Q22 97 0 106'/></svg>") no-repeat 0 0 / contain;
}
:root[data-season="halloween"] .site-header::after {   /* in place of the brass inlay: a spider on its thread */
  content: ""; position: absolute; top: 0; left: 62px; bottom: auto; width: 16px; height: 118px; opacity: 1; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 118'><path d='M8 0V104' stroke='%23ece3d6' stroke-width='.6' opacity='.7'/><g fill='%23120a14' stroke='%23120a14' stroke-width='1.1' stroke-linecap='round'><path d='M8 108L2 102M8 108L1 107M8 110L1 113M8 111L3 117M8 108L14 102M8 108L15 107M8 110L15 113M8 111L13 117' fill='none'/><ellipse cx='8' cy='110' rx='3.4' ry='4.4'/><circle cx='8' cy='104.5' r='2.4'/></g><circle cx='7' cy='104' r='.5' fill='%23f59a3a'/><circle cx='9' cy='104' r='.5' fill='%23f59a3a'/></svg>") no-repeat 0 0 / 100% 100%;
  transform-origin: 50% 0; animation: hw-dangle 6s ease-in-out infinite;
}
@keyframes hw-dangle { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(4px); } }
@media (max-width: 60rem) { :root[data-season="halloween"] .site-header::after { display: none; } }   /* no room beside the name */
:root[data-season="halloween"] .brand-name { text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 16px rgba(255, 130, 40, .45); }
:root[data-season="halloween"] .brand-mark circle,
:root[data-season="halloween"] .brand-mark path { stroke: var(--gilt); }
:root[data-season="halloween"] .brand-mark path:last-child { fill: var(--gilt); }
:root[data-season="halloween"] #season-toggle[aria-pressed="true"] { color: var(--brass-2); }

/* ---- the home page banner: a moonlit night, with bats crossing the moon and embers rising ---------------------- */
:root[data-season="halloween"] .hero {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'><defs><path id='b' d='M20 5c.8-1.6 1.2-3 1.2-3l.9 2.3c1.4-.3 2.6.3 3.2 1.4C27 3.6 31 1.8 40 2c-3.6 1.6-5.4 4-5.6 7.2-1.8-1.4-4-1.6-5.4-.4-.6-1.4-2-2-3.4-1.6.4 1.4-.2 3-1.6 4.8L20 15l-4-3c-1.4-1.8-2-3.4-1.6-4.8-1.4-.4-2.8.2-3.4 1.6-1.4-1.2-3.6-1-5.4.4C5.4 6 3.6 3.6 0 2c9-.2 13 1.6 14.6 3.6.6-1.1 1.8-1.7 3.2-1.4l.9-2.3S19.2 3.4 20 5z'/></defs><g fill='%2307040a'><use href='%23b' transform='translate(120 30) scale(1.2)'/><use href='%23b' transform='translate(176 62) scale(.8) rotate(-8 20 8)'/><use href='%23b' transform='translate(70 66) scale(.6) rotate(10 20 8)'/><use href='%23b' transform='translate(196 18) scale(.5) rotate(-14 20 8)'/></g></svg>"),
    radial-gradient(circle at 80% 30%, #fbf6e4 0, #f1e7cc 30px, #ddcfac 45px, rgba(221, 207, 172, 0) 46.5px),   /* the moon, shaded towards its edge */
    radial-gradient(circle at 80% 30%, rgba(255, 238, 200, .35), rgba(255, 238, 200, 0) 150px),
    radial-gradient(120% 100% at 50% 110%, rgba(0, 0, 0, .65), transparent 60%),
    var(--noise),
    linear-gradient(180deg, var(--hero-top), var(--hero-bottom));
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  background-position: right calc(20% - 120px) top calc(30% - 54px), 0 0, 0 0, 0 0, 0 0, 0 0;
  background-size: 240px 120px, auto, auto, auto, auto, auto;
}
@media (max-width: 40rem) {   /* on a phone, a smaller moon up in the corner, clear of the words */
  :root[data-season="halloween"] .hero {
    background-image:
      radial-gradient(circle at calc(100% - 46px) 34px, #fbf6e4 0, #f1e7cc 13px, #ddcfac 19px, rgba(221, 207, 172, 0) 20px),
      radial-gradient(circle at calc(100% - 46px) 34px, rgba(255, 238, 200, .3), rgba(255, 238, 200, 0) 70px),
      radial-gradient(120% 100% at 50% 110%, rgba(0, 0, 0, .65), transparent 60%),
      var(--noise),
      linear-gradient(180deg, var(--hero-top), var(--hero-bottom));
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
    background-position: 0 0;
    background-size: auto;
  }
}
:root[data-season="halloween"] .hero h1 { text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 34px rgba(255, 120, 30, .5); }
:root[data-season="halloween"] .motes i { width: 2px; height: 2px; }

/* Everyday bookends; seasonal themes can replace these images. */
:root:not([data-season]) {
  --bookend-display: block;
  --bookend-left: url("../img/bookends/walnut.png");
  --bookend-right: url("../img/bookends/walnut.png");
}
:root:not([data-season]) .shelf-bookend {
  flex-basis: clamp(54px, 10vw, 120px);
  height: clamp(110px, 18vw, 190px);
}
:root:not([data-season]) .shelf-bookend--right {
  background-position: right bottom;
  transform: scaleX(-1);
}
.seasonal-shelf { display: flex; align-items: flex-end; max-width: 90rem; margin-inline: auto; }
.seasonal-shelf > .shelf-scroll {
  flex: 1; min-width: 0;
  /* The scrollbar occupies the front of the plank, below the books' baseline. */
  position: relative; z-index: 1;
  padding-bottom: calc(18px - var(--shelf-scrollbar-height, 0px));
  margin-bottom: -18px;
}
.shelf-bookend {
  display: var(--bookend-display, none);
  flex: 0 0 clamp(85px, 20vw, 190px);
  height: clamp(150px, 24vw, 270px);
  background: var(--bookend-image) no-repeat center bottom / contain;
  pointer-events: none;
  filter: var(--bookend-filter, drop-shadow(0 3px 3px #0006));
}
.shelf-bookend--left { --bookend-image: var(--bookend-left, none); background-position: right bottom; }
.shelf-bookend--right {
  --bookend-image: var(--bookend-right, none); background-position: left bottom;
  /* Compensate for transparent space inside a season's illustration. */
  transform: translateX(var(--bookend-right-inset, 0%));
}
/* Close the padding on both scroll containers and hug short collections too. */
.seasonal-shelf { justify-content: center; }
.seasonal-shelf > .shelf-scroll { flex: 0 1 auto; padding-inline: 0; }
.seasonal-shelf .shelf { padding-inline: 0; }
:root[data-season="halloween"] {
  --bookend-display: block;
  --bookend-left: url("../img/seasons/halloween/bookend-raven.png");
  --bookend-right: url("../img/seasons/halloween/bookend-owl.png");
  --bookend-right-inset: -10%;
  --bookend-filter: drop-shadow(0 3px 3px #160c1490) drop-shadow(0 0 6px #ff9a3020);
}
/* Align the visible bases, compensating for the PNGs' transparent bottom margins.
   Account for contain scaling by both the slot's height and its width. */
:root[data-season="halloween"] .shelf-bookend--left {
  transform: translateY(min(calc(clamp(150px, 24vw, 270px) * 21 / 720), calc(clamp(85px, 20vw, 190px) * 21 / 480)));
}
:root[data-season="halloween"] .shelf-bookend--right {
  transform: translate(var(--bookend-right-inset), min(calc(clamp(150px, 24vw, 270px) * 7 / 576), calc(clamp(85px, 20vw, 190px) * 7 / 480)));
}
/* Retain usable book widths on phones; scroll only the central collection. */
@media (max-width: 40rem) {
  .seasonal-shelf > .shelf-scroll { overflow-x: auto; }
  .seasonal-shelf .shelf { width: max-content; min-width: 100%; }
  .seasonal-shelf .spine { flex: none; }
}
@media print { .shelf-bookend { display: none; } }

/* ---- the ornaments between sections become bats ---------------------------------------------------------------- */
:root[data-season="halloween"] .orn-glyph { font-size: 0; line-height: 0; }
:root[data-season="halloween"] .orn-glyph::before {
  content: ""; display: inline-block; width: 2.4rem; height: 1rem; vertical-align: middle; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'><path d='M20 5c.8-1.6 1.2-3 1.2-3l.9 2.3c1.4-.3 2.6.3 3.2 1.4C27 3.6 31 1.8 40 2c-3.6 1.6-5.4 4-5.6 7.2-1.8-1.4-4-1.6-5.4-.4-.6-1.4-2-2-3.4-1.6.4 1.4-.2 3-1.6 4.8L20 15l-4-3c-1.4-1.8-2-3.4-1.6-4.8-1.4-.4-2.8.2-3.4 1.6-1.4-1.2-3.6-1-5.4.4C5.4 6 3.6 3.6 0 2c9-.2 13 1.6 14.6 3.6.6-1.1 1.8-1.7 3.2-1.4l.9-2.3S19.2 3.4 20 5z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'><path d='M20 5c.8-1.6 1.2-3 1.2-3l.9 2.3c1.4-.3 2.6.3 3.2 1.4C27 3.6 31 1.8 40 2c-3.6 1.6-5.4 4-5.6 7.2-1.8-1.4-4-1.6-5.4-.4-.6-1.4-2-2-3.4-1.6.4 1.4-.2 3-1.6 4.8L20 15l-4-3c-1.4-1.8-2-3.4-1.6-4.8-1.4-.4-2.8.2-3.4 1.6-1.4-1.2-3.6-1-5.4.4C5.4 6 3.6 3.6 0 2c9-.2 13 1.6 14.6 3.6.6-1.1 1.8-1.7 3.2-1.4l.9-2.3S19.2 3.4 20 5z'/></svg>") center / contain no-repeat;
}

/* ---- the footer: a glow along its top edge ------------------------------------------------------------------- */
:root[data-season="halloween"] .site-footer { box-shadow: inset 0 1px 0 rgba(255, 170, 90, .12), 0 -2px 16px rgba(240, 110, 20, .22), 0 -8px 20px rgba(0, 0, 0, .35); }
:root[data-season="halloween"] .bookplate { box-shadow: 0 0 22px rgba(255, 120, 30, .12); }

/* The comic reader keeps its own dark viewer; printing ignores the season entirely. */
@media print {
  :root[data-season="halloween"] body::before,
  :root[data-season="halloween"] .site-header::before,
  :root[data-season="halloween"] .site-header::after { display: none; }
}