/* ==========================================================================
   GOLDEN JUBILEE — homepage hero (replaces the old Depicter hero)
   Gold ground, off-white sun, red ink (the jubilee palette, header.css). Everything is prefixed gj- so the
   old WordPress theme styles can't reach it.
   ========================================================================== */
:root{
  --gj-maroon-deep:#3F060E; --gj-maroon:#760B19; --gj-maroon-lit:#A4152A;
  --gj-gold-deep:#7A4E08; --gj-gold:#D8A13A; --gj-gold-lit:#F6D06E; --gj-gold-white:#FFF0BD;
  --gj-cream:#FFF6E6;
  --gj-serif:'Cormorant Garamond','Playfair Display','Times New Roman',serif;
  --gj-sans:'Urbanist','Helvetica Neue',Arial,sans-serif;
  --gj-header:0px;           /* set by hero.js to the site header's height */
}

.gj-hero, .gj-hero *{box-sizing:border-box}
.gj-hero{position:relative;overflow:hidden;isolation:isolate;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  min-height:calc(100vh - var(--gj-header));min-height:calc(100svh - var(--gj-header));
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;
  padding:clamp(24px,4vw,64px) clamp(20px,6vw,96px) 0;color:var(--jb-red-deep);
  font-family:var(--gj-sans);-webkit-font-smoothing:antialiased;
  background:var(--jb-gold-300);}
.gj-hero p, .gj-hero h1, .gj-hero figure{margin:0;padding:0}

/* an off-white sun behind the Prophet, with one red ring */
.gj-hero__glow{position:absolute;left:74%;top:54%;width:min(46vw,76vh);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;border-radius:50%;
  background:var(--jb-cream);box-shadow:0 0 0 14px var(--jb-gold-300),0 0 0 15px rgba(138,26,44,.42),0 0 0 17px color-mix(in srgb,var(--jb-blue) 58%,transparent)}
/* the loader's 50/50 line, kept as a quiet horizon */
.gj-hero__line{position:absolute;left:0;right:0;top:50%;height:1px;z-index:-2;background:rgba(138,26,44,.3);
  transform:scaleX(0);transform-origin:center}
/* fifty years, in outline, behind the portrait */
.gj-hero__fifty{position:absolute;left:74%;top:50%;transform:translate(-50%,-50%);z-index:-1;white-space:nowrap;
  font-family:'Playfair Display',var(--gj-serif);font-weight:500;line-height:.8;letter-spacing:.02em;
  font-size:min(34vw,62vh);color:transparent;-webkit-text-stroke:1.5px rgba(138,26,44,.35);opacity:0;pointer-events:none}
.gj-hero__stars{position:absolute;inset:0;z-index:-2;pointer-events:none}
.gj-hero__stars svg{position:absolute;fill:var(--jb-cream);opacity:0;animation:gjTwinkle 5s ease-in-out infinite}
.gj-hero__stars svg:nth-child(7n){fill:var(--jb-blue)}
@keyframes gjTwinkle{0%,100%{opacity:0;transform:scale(.6) rotate(0deg)}50%{opacity:.9;transform:scale(1) rotate(20deg)}}

.gj-hero__text{position:relative;z-index:2;max-width:640px;padding-bottom:6vh}
.gj-hero__eyebrow{display:block;font:750 clamp(13px,1.05vw,16px)/1.45 var(--gj-sans) !important;letter-spacing:.28em !important;text-transform:uppercase;color:var(--jb-red) !important}
.gj-hero .gj-hero__title{display:inline-block;margin-top:.3em;font-family:var(--gj-serif) !important;font-weight:300 !important;text-transform:uppercase;
  font-size:clamp(44px,min(7.4vw,12.5vh),124px) !important;line-height:.9 !important;letter-spacing:.07em !important;
  color:var(--jb-red-deep) !important}
.gj-hero__with{display:block;margin-top:1.1em !important;font-family:var(--gj-serif) !important;font-style:italic;font-weight:400;
  font-size:clamp(20px,2.2vw,30px) !important;line-height:1.3 !important;color:var(--jb-red-deep) !important}
.gj-hero__with span{font-style:normal;font-weight:500;letter-spacing:.02em}
.gj-hero__date{margin-top:1.6em !important;display:inline-flex;align-items:center;gap:.9em;
  font:600 12px/1 var(--gj-sans) !important;letter-spacing:.34em !important;text-transform:uppercase;color:var(--jb-cream) !important;
  padding:.95em 1.4em !important;border-radius:999px;background:var(--jb-red)}
.gj-hero__date span{color:var(--jb-gold-100)}

.gj-hero__prophet{position:relative;z-index:1;align-self:end;justify-self:center;
  height:min(calc(92vh - var(--gj-header)),1000px);display:flex;align-items:flex-end}
.gj-hero__prophet img{height:100% !important;width:auto !important;max-width:none !important;object-fit:contain;
  filter:drop-shadow(0 24px 40px rgba(78,58,14,.35))}

.gj-hero__cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none !important;font:700 9px/1 var(--gj-sans);letter-spacing:.34em;text-transform:uppercase;color:var(--jb-red-deep) !important}
.gj-hero__cue i{width:1px;height:36px;background:var(--jb-red);animation:gjCue 2s ease-in-out infinite;transform-origin:top}
@keyframes gjCue{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* entrance — runs as the loader's curtain parts (html gets .gj-in) */
.gj-hero__eyebrow,.gj-hero .gj-hero__title,.gj-hero__with,.gj-hero__date,.gj-hero__prophet{opacity:0;transform:translateY(28px)}
.gj-hero__prophet{transform:translateY(60px)}
.gj-in .gj-hero__eyebrow,.gj-in .gj-hero .gj-hero__title,.gj-in .gj-hero__with,.gj-in .gj-hero__date,.gj-in .gj-hero__prophet{
  opacity:1;transform:none;transition:opacity 1s ease, transform 1.2s cubic-bezier(.16,1,.3,1)}
.gj-in .gj-hero__prophet{transition-duration:1.2s,1.6s}
.gj-in .gj-hero__eyebrow{transition-delay:.15s}
.gj-in .gj-hero .gj-hero__title{transition-delay:.3s}
.gj-in .gj-hero__with{transition-delay:.5s}
.gj-in .gj-hero__date{transition-delay:.65s}
.gj-in .gj-hero__line{transform:scaleX(1);transition:transform 1.6s cubic-bezier(.16,1,.3,1) .1s}
.gj-in .gj-hero__fifty{opacity:1;transition:opacity 2s ease .4s}

@media (max-width:860px){
  .gj-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;padding:clamp(40px,10vw,80px) 20px 0;text-align:center}
  .gj-hero__text{justify-self:center;width:100%;max-width:640px;min-width:0;padding-bottom:0;text-align:center}
  .gj-hero__eyebrow{width:100%;max-width:100%;font-size:clamp(11px,2.5vw,14px) !important;letter-spacing:.18em !important;overflow-wrap:anywhere;text-align:center}
  .gj-hero .gj-hero__title{display:block;width:100%;max-width:100%;overflow-wrap:anywhere;word-break:normal;text-align:center}
  .gj-hero__with{width:100%;max-width:100%;overflow-wrap:anywhere;text-align:center}
  .gj-hero__date{display:flex;width:max-content;max-width:100%;margin-inline:auto !important;flex-wrap:wrap;justify-content:center;line-height:1.35 !important;letter-spacing:.18em !important;text-align:center}
  .gj-hero__prophet{height:min(60vh,620px);margin-top:12px !important}
  .gj-hero__fifty{left:50%;top:62%;transform:translate(-50%,-50%);font-size:min(78vw,52vh)}
  .gj-hero__glow{left:50%;top:64%;width:min(86vw,56vh)}
  .gj-hero__cue{display:none}
}
@media(max-width:380px){
  .gj-hero{padding-inline:16px}
  .gj-hero__text{width:100%;max-width:100%}
  .gj-hero__eyebrow{font-size:10.5px !important;letter-spacing:.12em !important}
  .gj-hero .gj-hero__title{font-size:clamp(36px,13vw,48px) !important;letter-spacing:.025em !important}
  .gj-hero__with{font-size:18px !important}
  .gj-hero__date{gap:.55em;padding:.85em 1em !important;font-size:11px !important;letter-spacing:.12em !important}
}
@media (prefers-reduced-motion:reduce){
  .gj-hero__eyebrow,.gj-hero .gj-hero__title,.gj-hero__with,.gj-hero__date,.gj-hero__prophet,.gj-hero__fifty{opacity:1;transform:none}
  .gj-hero__line{transform:none}
  .gj-hero__stars svg{animation:none;opacity:.5}
}

/* Interactive foil stars float behind hero content; taps never block scrolling. */
.gj-hero__balloons{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.gj-in .gj-hero__balloons{opacity:1}
.gj-hero__balloons canvas{display:block;width:100%;height:100%;pointer-events:none}
.gj-balloon-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gj-hero .gj-hero__balloon-add{position:absolute;right:clamp(18px,3vw,48px);bottom:28px;z-index:5;display:flex;align-items:center;gap:12px;isolation:isolate;overflow:visible;border:1px solid #fff2c3;border-radius:99px!important;padding:14px 25px;background:#760b19;color:#fff4d6;font:600 16px/1.2 var(--gj-sans);cursor:pointer;box-shadow:0 5px 24px #3f060e24;transition:transform .2s,opacity .2s}
.gj-hero__balloon-add::before{content:"";position:absolute;inset:-9px;border:1px solid rgba(255,242,195,.72);border-radius:inherit;z-index:-1;pointer-events:none;animation:gjBalloonCue 2.5s cubic-bezier(.2,.7,.3,1) infinite}
.gj-hero__balloon-add:hover{transform:translateY(-3px)}
.gj-hero__balloon-add:focus-visible{outline:3px solid #fff6e6;outline-offset:4px}
.gj-hero__balloon-add:disabled{opacity:.45;cursor:default}
.gj-hero__balloon-fireworks{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.gj-balloon-celebrating:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at center,#fff0bd44,transparent 75%)}
@keyframes gjBalloonCue{0%{transform:scale(.96);opacity:0}18%{opacity:.66}100%{transform:scale(1.22);opacity:0}}
@media(max-width:600px){.gj-hero .gj-hero__balloon-add{bottom:20px;right:20px;font-size:14px;padding:13px 22px}}
@media(prefers-reduced-motion:reduce){.gj-hero__balloons,.gj-hero__balloon-add{transition:none}.gj-hero__balloon-add::before{animation:none;opacity:.45}}