/* Grail Fables — "Storyfireflies" hero (integrated 20261027).
   Source: grailfables-hero.html. Global resets removed & namespaced
   so the site-wide gf.css keeps control of body/page styling. */
.gf-hero,.gf-hero *,.gf-hero *::before,.gf-hero *::after{box-sizing:border-box}


/* ─────────────────────────  HERO SHELL  ───────────────────────── */
.gf-hero{
  --gf-gold:#e8c66b; --gf-gold-bright:#f6dc92; --gf-gold-deep:#c9962e;
  --gf-cream:#f4ecd8; --gf-cream-dim:#b3ac97;
  --px:0px; --py:0px;
  position:relative; overflow:hidden; isolation:isolate;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  font-family:'Cormorant Garamond',Georgia,serif;
  color:var(--gf-cream);
  background:
    radial-gradient(120% 84% at 50% 112%, rgba(201,150,46,.17), rgba(201,150,46,0) 55%),
    radial-gradient(85% 60% at 50% -12%, #16234e 0%, rgba(22,35,78,0) 62%),
    linear-gradient(180deg, #050a1a 0%, #0a1128 44%, #0d1530 72%, #121d42 100%);
}
.gf-canvas{position:absolute; inset:0; z-index:1; pointer-events:none}
.gf-vignette{position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(130% 96% at 50% 46%, rgba(0,0,0,0) 58%, rgba(3,5,12,.52) 100%)}
.gf-grain{position:absolute; inset:-40px; z-index:6; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:180px 180px}
.gf-beam{position:absolute; left:50%; bottom:6vh; z-index:1; pointer-events:none;
  width:min(430px,64vw); height:47vh; opacity:.8;
  background:linear-gradient(to top, rgba(232,198,107,.16), rgba(232,198,107,.055) 42%, rgba(232,198,107,0) 78%);
  filter:blur(16px); border-radius:50% 50% 42% 42%;
  transform:translate(calc(-50% + var(--px) * .8), calc(var(--py) * .4));
  animation:gfBeamPulse 7s ease-in-out 2.6s infinite}

/* ─────────────────────────  NAV  ───────────────────────── */
.gf-nav{position:relative; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:clamp(18px,3vh,30px) clamp(20px,4.5vw,54px);
  opacity:0; animation:gfFadeIn 1s ease .15s both}
.gf-brand{display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--gf-cream)}
.gf-brand-logo{height:clamp(44px,8.5vh,76px); width:auto; display:block;
  object-fit:contain; filter:drop-shadow(0 0 7px rgba(232,198,107,.45));
  transition:transform .35s ease, filter .35s ease}
.gf-brand:hover .gf-brand-logo{transform:translateY(-1px); filter:drop-shadow(0 0 9px rgba(232,198,107,.7))}
@media (prefers-reduced-motion:reduce){.gf-brand-logo{transition:none}}
.gf-brand b{font-family:'Montserrat',Verdana,sans-serif; font-weight:600; font-size:.8rem;
  letter-spacing:.34em; text-transform:uppercase}
.gf-links{display:flex; gap:clamp(16px,2.4vw,34px)}
.gf-links a{position:relative; font-family:'Montserrat',Verdana,sans-serif; font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(244,236,216,.72);
  text-decoration:none; padding:6px 2px; transition:color .3s ease}
.gf-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gf-gold); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.gf-links a:hover{color:var(--gf-gold-bright)}
.gf-links a:hover::after{transform:scaleX(1)}

/* ─────────────────────────  COPY  ───────────────────────── */
.gf-copy{position:relative; z-index:3; flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:1vh 6vw clamp(150px,21vh,240px);
  transform:translate3d(calc(var(--px) * .35), calc(var(--py) * .35), 0); will-change:transform}
.gf-eyebrow{display:flex; align-items:center; gap:14px; margin:0 0 clamp(14px,2.2vh,22px);
  font-family:'Montserrat',Verdana,sans-serif; font-weight:500;
  font-size:clamp(.6rem,.5vw + .34rem,.74rem); letter-spacing:.5em; text-transform:uppercase;
  color:rgba(232,198,107,.9);
  opacity:0; animation:gfFadeUp 1s cubic-bezier(.22,.7,.25,1) .5s both}
.gf-eyebrow::before,.gf-eyebrow::after{content:""; width:44px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,198,107,.65))}
.gf-eyebrow::after{transform:scaleX(-1)}
.gf-h1{margin:0; font-weight:600; font-size:clamp(2.45rem,4.7vw + .8rem,4.9rem);
  line-height:1.07; letter-spacing:.01em; text-wrap:balance; color:var(--gf-cream);
  text-shadow:0 2px 34px rgba(4,8,20,.6)}
.gf-h1 .w{display:inline-block; opacity:0; transform:translateY(30px) rotate(2deg); filter:blur(9px);
  animation:gfWord .9s cubic-bezier(.22,.7,.25,1) both;
  animation-delay:calc(.62s + var(--i) * .085s)}
.gf-h1 .gf-em{font-style:italic; font-weight:500;
  background:linear-gradient(105deg,#f8e3a0 0%,#e8c66b 48%,#d3a03a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none}
.gf-rule{display:flex; align-items:center; gap:12px; margin:clamp(16px,2.6vh,26px) 0 0;
  opacity:0; animation:gfFadeUp 1s ease 1.5s both}
.gf-rule span{width:64px; height:1px; background:linear-gradient(90deg,transparent,rgba(232,198,107,.55))}
.gf-rule span:last-child{transform:scaleX(-1)}
.gf-rule i{color:var(--gf-gold); font-style:normal; font-size:.7rem;
  text-shadow:0 0 12px rgba(232,198,107,.8); animation:gfTwinkle 3.2s ease-in-out 2s infinite}
.gf-sub{margin:clamp(12px,2vh,18px) 0 0; max-width:580px;
  font-size:clamp(1.06rem,.55vw + .9rem,1.32rem); font-weight:500; font-style:italic;
  line-height:1.5; color:var(--gf-cream-dim);
  opacity:0; animation:gfFadeUp 1s cubic-bezier(.22,.7,.25,1) 1.66s both}
.gf-sub em{color:var(--gf-gold-bright)}
.gf-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin-top:clamp(22px,3.6vh,34px);
  opacity:0; animation:gfFadeUp 1s cubic-bezier(.22,.7,.25,1) 1.84s both}
.gf-btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:.95em 2em; border-radius:999px;
  font-family:'Montserrat',Verdana,sans-serif; font-weight:600; font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  transition:transform .35s cubic-bezier(.22,.7,.25,1), box-shadow .35s ease,
             background-color .35s ease, border-color .35s ease, color .35s ease}
.gf-btn-solid{background:linear-gradient(115deg,#f0cf78,#d9a83f 60%,#c8952e); color:#241b06;
  box-shadow:0 6px 26px rgba(217,168,63,.28), inset 0 1px 0 rgba(255,250,225,.55)}
.gf-btn-solid:hover{transform:translateY(-2px);
  box-shadow:0 12px 38px rgba(232,198,107,.4), inset 0 1px 0 rgba(255,250,225,.55)}
.gf-btn-ghost{color:var(--gf-cream); border:1px solid rgba(232,198,107,.42);
  background:rgba(232,198,107,.04); backdrop-filter:blur(4px)}
.gf-btn-ghost:hover{transform:translateY(-2px); background:rgba(232,198,107,.12);
  border-color:rgba(232,198,107,.75)}
.gf-hero a:focus-visible{outline:2px solid rgba(232,198,107,.85); outline-offset:3px; border-radius:4px}

/* ─────────────────────────  BOOK  ───────────────────────── */
.gf-book-pos{position:absolute; z-index:2; left:50%; bottom:clamp(16px,4.2vh,44px);
  width:min(288px,58vw); pointer-events:none;
  transform:translate3d(calc(-50% + var(--px)), var(--py), 0); will-change:transform}
.gf-book{position:relative; opacity:0;
  animation:gfBookIn 1.5s cubic-bezier(.22,.7,.25,1) 1.15s both,
            gfFloat 7.5s ease-in-out 2.75s infinite}
.gf-book-glow{position:absolute; left:50%; top:52%; width:150%; height:110%;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(232,198,107,.34), rgba(232,198,107,.1) 46%, rgba(232,198,107,0) 72%);
  filter:blur(8px); animation:gfGlowPulse 6s ease-in-out 2.8s infinite}
.gf-book-svg{position:relative; display:block; width:100%; height:auto; overflow:visible}
.gf-book-svg .cover{stroke:rgba(232,198,107,.4); stroke-width:1.6; fill:rgba(10,16,36,.6);
  stroke-linejoin:round}
.gf-book-svg .ln{stroke:var(--gf-gold); stroke-width:2; fill:rgba(232,198,107,.05);
  stroke-linecap:round; stroke-linejoin:round}
.gf-book-svg .ln2{stroke:rgba(232,198,107,.55); stroke-width:1.1; fill:none; stroke-linecap:round}
.gf-book-svg .ln3{stroke:rgba(232,198,107,.32); stroke-width:1; fill:none; stroke-linecap:round}

/* ─────────────────────────  VINES + SCROLL CUE  ───────────────────────── */
.gf-vine{position:absolute; z-index:2; bottom:-6px; width:clamp(70px,9vw,120px);
  pointer-events:none; opacity:0; transform-origin:50% 100%}
.gf-vine svg{display:block; width:100%; height:auto}
.gf-vine .v-stem{stroke:rgba(232,198,107,.38); stroke-width:1.6; fill:none; stroke-linecap:round}
.gf-vine .v-leaf{stroke:rgba(232,198,107,.3); stroke-width:1.2; fill:rgba(232,198,107,.07)}
.gf-vine-l{left:clamp(8px,3vw,44px);
  animation:gfFadeIn 2s ease 2.3s both, gfSway 12s ease-in-out 2.3s infinite alternate}
.gf-vine-r{right:clamp(8px,3vw,44px); --m:-1;
  animation:gfFadeIn 2s ease 2.55s both, gfSway 13s ease-in-out 2.55s infinite alternate-reverse}
.gf-scroll{position:absolute; z-index:4; right:clamp(14px,3.4vw,44px); bottom:clamp(18px,4vh,42px);
  display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none;
  opacity:0; animation:gfFadeIn 1.4s ease 2.8s both}
.gf-scroll span{writing-mode:vertical-rl; font-family:'Montserrat',Verdana,sans-serif;
  font-size:.6rem; letter-spacing:.42em; text-transform:uppercase; color:rgba(244,236,216,.55)}
.gf-scroll i{position:relative; width:1px; height:44px; background:rgba(232,198,107,.22); overflow:hidden}
.gf-scroll i::after{content:""; position:absolute; left:-1.5px; top:-8px; width:4px; height:8px;
  border-radius:4px; background:var(--gf-gold); box-shadow:0 0 8px rgba(232,198,107,.9);
  animation:gfScrollDot 2.3s cubic-bezier(.4,0,.3,1) 3s infinite}

/* ─────────────────────────  KEYFRAMES  ───────────────────────── */
@keyframes gfFadeIn{from{opacity:0}to{opacity:1}}
@keyframes gfFadeUp{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
@keyframes gfWord{from{opacity:0; transform:translateY(30px) rotate(2deg); filter:blur(9px)}
  60%{opacity:1}to{opacity:1; transform:none; filter:blur(0)}}
@keyframes gfBookIn{from{opacity:0; transform:translateY(46px) scale(.95)}to{opacity:1; transform:none}}
@keyframes gfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes gfGlowPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes gfBeamPulse{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes gfTwinkle{0%,100%{opacity:.6; text-shadow:0 0 8px rgba(232,198,107,.5)}
  50%{opacity:1; text-shadow:0 0 16px rgba(232,198,107,1)}}
@keyframes gfSway{from{transform:rotate(-1.3deg) scaleX(var(--m,1))}
  to{transform:rotate(1.5deg) scaleX(var(--m,1))}}
@keyframes gfScrollDot{0%{transform:translateY(0); opacity:0}12%{opacity:1}
  70%{transform:translateY(52px); opacity:1}100%{transform:translateY(56px); opacity:0}}

/* ─────────────────────────  RESPONSIVE  ───────────────────────── */
@media (max-height:740px){
  .gf-copy{padding-bottom:140px}
  .gf-h1{font-size:clamp(2rem,3.4vw + .6rem,3.3rem)}
  .gf-eyebrow{margin-bottom:12px}
  .gf-rule{margin-top:12px}
  .gf-sub{margin-top:10px}
  .gf-cta{margin-top:18px}
  .gf-book-pos{width:min(224px,50vw); bottom:10px}
  .gf-beam{height:36vh; bottom:4vh}
}
@media (max-width:860px){
  .gf-links{display:none}
  .gf-book-pos{width:min(230px,64vw)}
}
@media (max-width:900px),(max-height:640px){ .gf-scroll{display:none} }
@media (max-width:560px){
  .gf-vine{display:none}
  .gf-eyebrow{letter-spacing:.38em}
  .gf-eyebrow::before,.gf-eyebrow::after{width:26px}
  .gf-cta{flex-direction:column; width:100%; max-width:320px; margin-left:auto; margin-right:auto}
  .gf-btn{width:100%}
}

/* ─────────────────────────  REDUCED MOTION  ───────────────────────── */
@media (prefers-reduced-motion:reduce){
  .gf-hero *,.gf-hero *::before,.gf-hero *::after{animation:none!important; transition:none!important}
  .gf-hero .gf-nav,.gf-hero .gf-eyebrow,.gf-hero .gf-h1 .w,.gf-hero .gf-rule,
  .gf-hero .gf-sub,.gf-hero .gf-cta,.gf-hero .gf-book,.gf-hero .gf-vine,.gf-hero .gf-scroll{
    opacity:1!important; transform:none!important; filter:none!important}
  .gf-hero .gf-vine-r{transform:scaleX(-1)!important}
  .gf-hero .gf-book-pos{transform:translate3d(-50%,0,0)!important}
  .gf-hero .gf-copy{transform:none!important}
}

/* GF integration: homepage nav must stay reachable on small screens
   (the site header is replaced by .gf-hero on the homepage). */
@media (max-width:860px){
  .gf-nav{flex-wrap:wrap; gap:.9rem 1.4rem}
  .gf-links{display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; width:100%}
  .gf-links::-webkit-scrollbar{display:none}
  .gf-links a{white-space:nowrap; font-size:.68rem}
}