/* ==========================================================
   FREEDOM'S GATE — page-specific stylesheet.
   Loads on top of css/utility.css (site-header, page-shell, prose,
   closing-band all inherited unchanged). This file adds only the one
   new element this page needs: a full-bleed image hero beneath the
   header that fades/merges into the page body below it, echoing the
   Welcome page's Hero treatment but scaled down for an inner page.

   Final artwork: assets/freedoms-gate-hero-v2.png (the golden gate,
   2220x769 source, ~2.89:1 wide banner — a hand-retouched pass over the
   original freedoms-gate-hero.png done in Serif DrawPlus, adding a soft
   orb-light over every crystal to draw the eye from some faint gold
   line artefacts on the left side of the sky that couldn't be cleanly
   removed; a proportional 200dpi export, same composition and aspect
   ratio as the original, just ~4% larger canvas, so every crystal's
   left%/top% below still maps correctly with no re-measuring needed).
   The title "Freedom's Gate" is lettered directly into the artwork, so
   no text is overlaid on top of it. The hero is locked to the artwork's
   own aspect-ratio (2220/769) rather than a viewport-based height clamp — that guarantees the image
   is NEVER cropped at any window width, which in turn guarantees every
   crystal's left%/top% position always lands exactly where it was
   measured in the source file. (The earlier vw-based height clamp only
   matched the image's aspect at a narrow range of window widths; outside
   that range background-size:cover quietly cropped the sides and every
   position drifted — that was the root cause of crystals reading as
   off-centre.) Capped at max-width:2131px (native resolution) so it
   never scales up past 1:1 and blurs on very large monitors.
   ========================================================== */

.fg-hero {
  position: relative;
  width: 100%;
  max-width: 2220px;
  margin: 0 auto;
  aspect-ratio: 2220 / 769;
  background-image: url('../assets/freedoms-gate-hero-v2.png');
  background-size: 100% 100%;
  overflow: hidden;
}

/* Fades the hero into white at the bottom edge so it "merges" straight
   into the page-shell content beneath it, plus a light top scrim so the
   marble header above reads as one continuous surface with the image. */
.fg-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  /* Lightened 29 Aug 2026 at Peter's request — the white fade was washing out too much
     of the image detail; same shape, gentler opacities throughout. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 14%, rgba(255,255,255,0) 66%, rgba(255,255,255,.28) 90%, rgba(255,255,255,.50) 100%);
  pointer-events: none;
}

/* ===== CRYSTAL ARRAY — the actual crystal/gem objects painted into the
   artwork (pillar-top finials, the gems set into the open gate leaves, the
   garden lanterns and pedestal lamps at the base), the gate-disc star
   medallions, and the sun in the distance. Positioned as plain left%/top%,
   which now always lands correctly because .fg-hero is locked to the
   artwork's exact aspect-ratio (see above) rather than a viewport clamp,
   so the image is never cropped and these percentages always match the
   source file exactly. Coordinates found by cropping and visually
   confirming each crystal individually. ===== */
.fg-crystal-field { position:absolute; inset:0; z-index:2; pointer-events:none; }
.fg-crystal { position:absolute; transform:translate(-50%,-50%); }
/* Same breath-pulse mechanic as css/welcome.css, exactly: a literal 7-7-7
   breath (7s in, 7s held, 7s out — 21s total), every crystal and disc on
   this page sharing animation-delay:0s, so the whole array breathes as
   one, on the same rhythm as the Welcome page. Only the peak brightness
   differs per tier via custom properties — sun strongest, gate-leaf gems
   and gate discs softest — the shape and timing are identical for all. */
.fg-crystal::before {
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle, rgba(255,251,230,.95) 0%, rgba(255,242,195,.5) 50%, rgba(255,242,195,0) 80%);
  animation: fg-breath-pulse 21s ease-in-out infinite;
}
@keyframes fg-breath-pulse {
  0%     { transform:scale(.8);  opacity:0; }
  33.33% { transform:scale(1.25); opacity:var(--peak-op,.7); }
  66.66% { transform:scale(1.25); opacity:var(--peak-op,.7); }
  100%   { transform:scale(.8);  opacity:0; }
}
/* Each size class gets its own tuned peak brightness via the --peak-op
   custom property consumed by the shared keyframe above. */
.fg-crystal.sun {
  width: clamp(80px,8.2vw,150px); height: clamp(80px,8.2vw,150px);
  --peak-op:.75;
}
.fg-crystal.lg {
  width: clamp(22px,2.4vw,38px); height: clamp(22px,2.4vw,38px);
  --peak-op:.68;
}
.fg-crystal.md {
  width: clamp(18px,2vw,30px); height: clamp(18px,2vw,30px);
  --peak-op:.56;
}
.fg-crystal.sm {
  width: clamp(14px,1.5vw,22px); height: clamp(14px,1.5vw,22px);
  --peak-op:.46;
}
/* Gate-disc star medallions — kept the subtlest of all since there are 12
   of them and they're already bright in the artwork itself; meant to read
   as a faint shared shimmer, not a spotlight on each one. */
.fg-crystal.disc {
  width: clamp(20px,2.2vw,34px); height: clamp(20px,2.2vw,34px);
  --peak-op:.44;
}
@media (prefers-reduced-motion: reduce) {
  .fg-crystal::before { animation:none; opacity:.3; }
}

/* ===== DEDICATION — sits directly beneath the Hero, above the subtitle. ===== */
.fg-dedication {
  text-align: center;
  padding: clamp(30px,4.2vw,44px) clamp(24px,4vw,40px) 0;
  max-width: 680px; margin: 0 auto;
  font-family: var(--serif); font-style: italic; font-size: 1.08rem; line-height: 1.7;
  color: var(--text-dark);
}

/* Subtitle block sits below the hero (in the page-shell), since the
   title itself is lettered into the artwork — see .fg-subtitle below. */
.fg-subtitle {
  text-align: center;
  padding: clamp(12px,1.8vw,18px) clamp(24px,4vw,40px) 0;
  max-width: 700px; margin: 0 auto;
}
.fg-subtitle .fg-eyebrow {
  font-family: var(--sans); font-size: .72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.fg-subtitle .fg-tagline {
  font-family: var(--serif); font-style: italic; font-size: 1.1rem; line-height:1.6;
  color: var(--text-dark);
}

/* ===== SOURCE LINKS — the three cross-site links at the close of the
   page, set apart from the paragraph above with clear space and centred
   as their own row rather than buried inline in a sentence. ===== */
.fg-source-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px 28px;
  max-width: 700px; margin: clamp(24px,3.4vw,32px) auto 0;
  text-align: center;
}
.fg-source-links a {
  font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  color: var(--gold-deep); text-decoration: none;
  border-bottom: 1px solid var(--border); padding-bottom: 2px;
}
.fg-source-links a:hover { border-bottom-color: var(--teal); }

/* ===== DISCOURSE DOWNLOAD BUTTON — matches the .st-dl button used for
   downloads on the Seeking Truth page, so the two pages speak the same
   visual language for "here is a PDF." Added 31 Aug 2026. ===== */
.fg-dl {
  display:inline-block;
  font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dark); text-decoration:none; border:1.5px solid var(--gold-deep); border-radius:2px;
  padding:9px 20px; white-space:nowrap; transition: background .2s, color .2s;
}
.fg-dl:hover { background:var(--gold-deep); color:#fff; }

/* ===== GRANTS LIST — a simple numbered list for the 9 Grants, in the same
   serif voice as the surrounding prose rather than a default browser list. ===== */
.fg-grants-list {
  max-width: 700px; margin: 0 auto 20px;
  padding-left: 0;
  list-style: none;
  counter-reset: fg-grant;
}
.fg-grants-list li {
  counter-increment: fg-grant;
  position: relative;
  padding-left: 40px;
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.7;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.fg-grants-list li::before {
  content: counter(fg-grant) ".";
  position: absolute; left: 0; top: 0;
  font-family: var(--sans); font-weight: 700; font-size: .85rem;
  color: var(--gold-deep);
}

/* ===== SEALS — the EGA seal artwork and the 9 Grants layout, dropped in
   at their matching sections within the prose. Kept modest in size so
   they punctuate the overview rather than turning it into a gallery. */
.fg-seal {
  display: block; margin: clamp(28px,4vw,40px) auto;
  width: clamp(120px,16vw,190px); height: auto;
}
.fg-seal-wide {
  width: clamp(280px,70%,560px);
}