/* The Midway Goes Still — understated will-o'-the-wisp lights.
   Intentional editorial motion: no flash, no strobe, no pointer interference. */
.fae-lights{position:absolute;inset:0;pointer-events:none!important;overflow:hidden;isolation:isolate;z-index:0}
.fae-light{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#f2d3a1;box-shadow:0 0 4px 1px rgba(251,210,134,.38),0 0 17px 4px rgba(255,197,103,.12);opacity:.15;animation:midway-fairy-fade var(--duration,9s) ease-in-out var(--delay,0s) infinite alternate;will-change:opacity,transform}
.fae-light--star{background:#fff4da;box-shadow:0 0 6px 2px rgba(255,239,207,.5),0 0 18px 4px rgba(255,202,124,.18)}
.fae-light--star::after,.fae-light--star::before{content:"";position:absolute;inset:auto;background:rgba(253,228,182,.42);left:50%;top:50%;transform:translate(-50%,-50%);border-radius:99px}
.fae-light--star::before{height:1px;width:11px}
.fae-light--star::after{width:1px;height:11px}
@keyframes midway-fairy-fade{0%,18%{opacity:.07;transform:translate3d(0,1px,0) scale(.85)}55%{opacity:.36;transform:translate3d(0,-2px,0) scale(1)}82%,100%{opacity:.13;transform:translate3d(1px,-4px,0) scale(.92)}}
/* Keep the glow behind all content and never above text. */
.hero__content,.hero__scroll{position:relative;z-index:1}
.fae-lights--hero{z-index:0;mix-blend-mode:screen;opacity:.75}
.folklore-plate--panorama{position:relative}
.fae-lights--road{z-index:2;top:0;left:0;width:70%;height:100%;mix-blend-mode:screen;opacity:.9}
.folklore-plate--panorama img{position:relative}
.folklore-plate--panorama figcaption{position:relative;z-index:3}
.book-spread[data-book-page="0"] .book-spread__picture{position:relative;isolation:isolate}
.book-spread[data-book-page="0"] .book-spread__picture img{object-position:center 43%;filter:brightness(.95) contrast(1.025) saturate(.9)}
.book-spread[data-book-page="0"] .book-spread__plate{position:absolute;z-index:3}
.fae-lights--memory{z-index:1;opacity:.76;mix-blend-mode:screen}
.gallery-item[data-image="assets/before-the-fifth-note.webp"] img{object-position:50% 43%;filter:brightness(.95) contrast(1.03) saturate(.9)}
.gallery-item[data-image="assets/before-the-fifth-note.webp"]:hover img{filter:brightness(1) contrast(1.02) saturate(.94)}
.photo-plate--first-memory .gallery-item__caption{background:linear-gradient(transparent,rgba(4,8,10,.77));padding-top:40px}
@media(max-width:820px){.fae-lights--road{width:100%;height:68%}}
@media(max-width:600px){
 .fae-lights--hero{opacity:.5}
 .fae-lights--road{height:70%}
 .fae-lights--memory{opacity:.55}
 .book-spread[data-book-page="0"] .book-spread__picture img{object-position:50% 45%}
 .photo-plate--first-memory img{object-position:50% 43%}
}
@media(prefers-reduced-motion:reduce){
 .fae-light{animation:none!important;will-change:auto;opacity:.13;transform:none!important}
}
@media(prefers-reduced-data:reduce){.fae-light{animation:none;opacity:.09}}
/* Mobile featured photograph occupies real grid rows, rather than overlapping the portraits below. */
@media(max-width:650px){
 .gallery-grid--story > .photo-plate--first-memory{grid-column:span 2;grid-row:span 2;height:auto!important;min-height:0}
 .gallery-grid--story > .photo-plate--first-memory img{object-position:50% 44%}
 .gallery-grid--story > .photo-plate--first-memory .gallery-item__caption{padding:58px 18px 20px}
 .gallery-grid--story > .photo-plate--first-memory .gallery-item__caption strong{font-size:1.65rem!important}
 .gallery-grid--story > .photo-plate--first-memory .gallery-item__caption small{font-size:.84rem!important;line-height:1.45}
}


/* 2026-11-01: visible-but-gentle revision.
   The earlier 2px motes at 7%-36% opacity became practically invisible on iPhones.
   Keep them as warm, slow glows, never strobes or sharp flashing particles. */
.fae-light{
  width:clamp(4px,var(--size),7px);
  height:clamp(4px,var(--size),7px);
  background:radial-gradient(circle at 38% 32%,#fff8e7 0 22%,#ffe5ac 38%,#dfa768 75%,rgba(223,167,104,.28) 100%);
  box-shadow:0 0 6px 2px rgba(255,229,173,.73),0 0 18px 6px rgba(241,178,94,.26);
  opacity:.55;
  animation-name:midway-visible-fairy-breathe;
  animation-timing-function:ease-in-out;
}
.fae-light--star{
  box-shadow:0 0 8px 3px rgba(255,246,215,.72),0 0 24px 7px rgba(239,193,122,.3);
}
.fae-light--star::before,.fae-light--star::after{
  background:rgba(255,238,195,.52);
}
@keyframes midway-visible-fairy-breathe{
  0%,100%{opacity:.36;transform:translate3d(0,0,0) scale(.95)}
  45%,65%{opacity:.85;transform:translate3d(1px,-4px,0) scale(1.12)}
}
.fae-lights--hero,.fae-lights--road,.fae-lights--memory{opacity:1}
/* A few slightly brighter accents make the enchantment readable without filling the screen. */
.fae-lights .fae-light:nth-child(3n){
  width:clamp(5px,var(--size),8px);
  height:clamp(5px,var(--size),8px);
  box-shadow:0 0 7px 2px rgba(255,236,185,.8),0 0 24px 8px rgba(250,178,85,.35);
}
@media(max-width:600px){
  .fae-lights--hero,.fae-lights--road,.fae-lights--memory{opacity:1}
  /* Keep the brightest motes outside the central headline on narrow phones. */
  .fae-lights--hero .fae-light:nth-child(3){left:84%;top:19%}
  .fae-lights--hero .fae-light:nth-child(6){left:90%;top:40%}
  .fae-lights--hero .fae-light:nth-child(9){left:88%;top:67%}
  .fae-lights--hero .fae-light:nth-child(12){left:7%;top:77%}
}
@media(prefers-reduced-motion:reduce){
  .fae-light{animation:none!important;opacity:.55!important;transform:none!important}
}
@media(prefers-reduced-data:reduce){
  .fae-light{animation:none!important;opacity:.4!important}
}


/* VISIBILITY FIX — glowing fairground lights which remain apparent even in a still screenshot.
   The narrow-screen garland is intentionally kept on the photo/right side, away from reading text.
   No strobing or rapid flashes. Reduced Motion always shows the same steady glow. */
.fae-garland { position:absolute;top:10px;right:1.5%;width:min(43%,560px);height:118px;z-index:2;pointer-events:none;overflow:visible;opacity:.94;filter:drop-shadow(0 0 6px rgba(247,186,92,.13)); }
.fae-garland__wire {position:absolute;width:100%;height:100%;inset:0;overflow:visible;}
.fae-garland__wire path{stroke:rgba(210,176,120,.58);stroke-width:1.8;fill:none;vector-effect:non-scaling-stroke;}
.fae-garland__bulb{position:absolute;left:var(--gx);top:var(--gy);display:block;width:11px;height:13px;margin-left:-5px;margin-top:-4px;border-radius:44% 44% 55% 55%;background:radial-gradient(ellipse at 40% 28%,#fffdf2 0 21%,#ffe6a3 40%,#ffb759 78%,#d68234 100%);box-shadow:0 0 8px 3px rgba(255,226,169,.92),0 0 22px 8px rgba(251,176,76,.48),0 0 45px 14px rgba(228,140,63,.16);opacity:.86;transform:translate(-50%,-50%);animation:midway-garland-breathe 6s ease-in-out var(--gd) infinite alternate;}
.fae-garland__bulb:before{content:'';position:absolute;top:-4px;left:3px;width:5px;height:4px;border-radius:2px;background:#78614b;}
@keyframes midway-garland-breathe{0%,100%{opacity:.75;filter:brightness(.95)}50%{opacity:1;filter:brightness(1.35)}}
/* The magical motes have a visible core and a substantial warm halo (not just tiny low-opacity pixels). */
.fae-light{min-width:7px!important;min-height:7px!important;box-shadow:0 0 7px 3px rgba(255,236,189,.88),0 0 22px 9px rgba(244,178,88,.46),0 0 46px 16px rgba(225,151,69,.18)!important;opacity:.85!important;}
.fae-light--beacon{min-width:11px!important;min-height:11px!important;box-shadow:0 0 9px 3px rgba(255,240,201,.95),0 0 28px 11px rgba(252,193,105,.63),0 0 55px 20px rgba(250,160,66,.21)!important;}
@keyframes midway-visible-fairy-breathe{0%,100%{opacity:.68;transform:translate3d(0,1px,0) scale(.94)}50%{opacity:1;transform:translate3d(1px,-3px,0) scale(1.12)}}
/* Don't obscure the opening title: on phones, the string stays at upper-right. */
@media(max-width:820px){.fae-garland{width:52%;height:94px;right:0%;top:0}}
@media(max-width:600px){.fae-garland{width:37%;height:78px;right:2%;top:5px;opacity:.92}.fae-garland__wire path{stroke-width:1.5}.fae-garland__bulb{width:9px;height:11px;box-shadow:0 0 8px 3px rgba(255,232,183,.91),0 0 19px 7px rgba(255,179,81,.52),0 0 33px 10px rgba(251,166,68,.19)}.fae-lights--hero .fae-light--beacon{left:91%}}
@media(prefers-reduced-motion:reduce){.fae-garland__bulb,.fae-light{animation:none!important;opacity:.9!important;transform:none!important;filter:none!important}}