/* Icons reGospeled, shared brand layer.
   Single source of truth for brand tokens + the ambient cloud background.
   Linked by BOTH the Astro site and the Book Finder, so a change here flows
   to both and the finder never falls out of date. */

:root{
  --ground:#ECEEF2; --card:#F6F8FB; --white:#FFFFFF; --ink:#39342C; --muted:#867F73;
  --line:#DDE1E8; --gold:#8A6413; --gold-fill:#C69430; --gold-line:#DCA537; --on-gold:#2C2620;
  --shadow:0 10px 26px -18px rgba(90,96,110,.55);
  --shadow-lg:0 22px 54px -30px rgba(60,66,80,.6);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Epilogue',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* unified section title: the eyebrow's font + gold color, at heading size */
h1.stitle,h2.stitle,.stitle{font-family:var(--sans);color:var(--gold);font-weight:700;
  font-size:clamp(26px,4.7vw,43px);line-height:1.16;letter-spacing:0;text-transform:none;
  text-wrap:balance;margin:0 0 18px;max-width:none;}

/* ---- ethereal drifting color clouds (site-wide ambient background) ----
   Soft, blurred, organic blobs that morph and stretch as they drift, like
   slow-moving organisms. Barely more color than the ground. Behind everything. */
.aurora{position:fixed;inset:-15%;z-index:0;overflow:hidden;pointer-events:none;
  filter:blur(60px) saturate(128%);transform:translateZ(0);}
.aurora span{position:absolute;display:block;will-change:transform,border-radius;
  border-radius:42% 58% 63% 37% / 45% 42% 58% 55%;}
.aurora .c1{width:48vw;height:44vw;left:2vw;top:-2vw;
  background:radial-gradient(circle,rgba(198,148,48,.40),transparent 55%);animation:drift1 10s ease-in-out infinite;}
.aurora .c2{width:44vw;height:48vw;right:0;top:8vw;
  background:radial-gradient(circle,rgba(201,139,122,.34),transparent 55%);animation:drift2 12s ease-in-out infinite;}
.aurora .c3{width:52vw;height:46vw;left:26vw;bottom:-10vw;
  background:radial-gradient(circle,rgba(196,110,70,.32),transparent 55%);animation:drift3 14s ease-in-out infinite;}
@keyframes drift1{
  0%{transform:translate(0,0) rotate(0deg) scale(1,1);border-radius:42% 58% 63% 37% / 45% 42% 58% 55%;}
  33%{transform:translate(18vw,14vw) rotate(50deg) scale(1.2,.82);border-radius:66% 34% 40% 60% / 55% 62% 38% 45%;}
  66%{transform:translate(26vw,26vw) rotate(120deg) scale(.85,1.28);border-radius:38% 62% 55% 45% / 62% 40% 60% 38%;}
  100%{transform:translate(0,0) rotate(360deg) scale(1,1);border-radius:42% 58% 63% 37% / 45% 42% 58% 55%;}}
@keyframes drift2{
  0%{transform:translate(0,0) rotate(0deg) scale(1,1);border-radius:60% 40% 45% 55% / 55% 45% 55% 45%;}
  33%{transform:translate(-20vw,12vw) rotate(-60deg) scale(.82,1.24);border-radius:38% 62% 60% 40% / 45% 60% 40% 55%;}
  66%{transform:translate(-30vw,24vw) rotate(-140deg) scale(1.26,.88);border-radius:58% 42% 38% 62% / 60% 42% 58% 40%;}
  100%{transform:translate(0,0) rotate(-360deg) scale(1,1);border-radius:60% 40% 45% 55% / 55% 45% 55% 45%;}}
@keyframes drift3{
  0%{transform:translate(0,0) rotate(0deg) scale(1,1);border-radius:50% 50% 55% 45% / 48% 52% 48% 52%;}
  33%{transform:translate(16vw,-12vw) rotate(70deg) scale(1.24,.86);border-radius:64% 36% 42% 58% / 58% 44% 56% 42%;}
  66%{transform:translate(24vw,-6vw) rotate(150deg) scale(.88,1.22);border-radius:40% 60% 58% 42% / 44% 58% 42% 56%;}
  100%{transform:translate(0,0) rotate(360deg) scale(1,1);border-radius:50% 50% 55% 45% / 48% 52% 48% 52%;}}
@media(prefers-reduced-motion:reduce){.aurora span{animation:none;}}
/* mobile: small viewports need bigger blobs + less blur, or the clouds vanish */
@media(max-width:640px){
  .aurora{filter:blur(40px) saturate(128%);inset:-8%;}
  .aurora .c1{width:70vw;height:70vw;left:-14vw;right:auto;top:6vh;bottom:auto;}
  .aurora .c2{width:70vw;height:70vw;right:-14vw;left:auto;top:44vh;bottom:auto;}
  .aurora .c3{width:70vw;height:70vw;left:14vw;right:auto;top:78vh;bottom:auto;}
}