/* EGE component library.
   Everything here uses tokens from tokens.css. No hard-coded colours or fonts.
   Built to match the approved prototype: full-bleed photography, oversized serif
   headlines, eyebrow rules, 12px cards with a coloured top edge, pill buttons. */

*,*::before,*::after{ box-sizing:border-box; }
img{ max-width:100%; height:auto; display:block; }

.ege-wrap{ width:min(1180px, calc(100% - 2.5rem)); margin-inline:auto; }
/* Keeps a very short page from letting the footer ride up under the header. Capped in px
   rather than left as pure vh: on a tall window 40vh added hundreds of pixels of white
   below the last section on short pages. */
.ege-main{ min-height:min(40vh, 420px); }

/* ---------- buttons ---------- */
.ege-btn{
  display:inline-block; padding:.85rem 1.6rem; border-radius:var(--radius-pill);
  font-family:var(--font-body); font-weight:var(--wt-sub); font-size:.98rem;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, color .18s ease;
}
.ege-btn:hover{ transform:translateY(-2px); }

/* Every variant states its colour for every link state.
   Without this, the parent theme's `a:hover` wins on specificity (0,1,1 against a single
   class at 0,1,0) and a hovered button took the theme link colour, which on the forest
   button was blue on green and effectively invisible. Same trap applies to :visited on any
   button that points off site. */
.ege-btn--gold,
.ege-btn--gold:hover, .ege-btn--gold:focus, .ege-btn--gold:visited, .ege-btn--gold:active{
  background:var(--gold); color:var(--ink);                        /* ink on gold = 6.83:1 */
}
.ege-btn--gold:hover{ background:#c98f33; }
.ege-btn--forest,
.ege-btn--forest:hover, .ege-btn--forest:focus, .ege-btn--forest:visited, .ege-btn--forest:active{
  background:var(--forest); color:#fff;                            /* white on forest = 10.72:1 */
}
.ege-btn--forest:hover{ background:var(--green-deep); }
.ege-btn--ghost,
.ege-btn--ghost:visited, .ege-btn--ghost:active{ background:transparent; color:#fff; border-color:rgba(255,255,255,.75); }
.ege-btn--ghost:hover, .ege-btn--ghost:focus{ background:#fff; color:var(--forest); border-color:#fff; }

/* ---------- header ---------- */
.ege-header{
  position:sticky; top:0; z-index:900; background:#fff;
  border-bottom:1px solid rgba(9,72,56,.10);
}
.ege-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.7rem 0; }
/* The mark is the tree ring from her vector logo. Header had a wordmark only, which is why
   the client asked for the logo to be enlarged: there was no logo in the header at all. */
/* Client, 2026-09-07: "make logo larger and closer to the EGE Foundation Name".
   58px to 74px in the header, 64px to 88px in the footer, and the gap tightened from .75rem
   to .45rem so the mark reads as part of the lockup rather than an icon sitting near it.
   Header vertical padding drops from .9rem to .7rem at the same time, so a mark 16px taller
   does not push the sticky header down the viewport on every page. */
.ege-brand{ text-decoration:none; display:flex; align-items:center; gap:.45rem; line-height:1.05; }
.ege-brand__text{ display:flex; flex-direction:column; }
.ege-brand__mark{ width:74px; height:74px; flex:none; display:block; color:var(--forest); }
.ege-brand__mark svg{ width:100%; height:100%; display:block; }
.ege-brand__mark--footer{ width:88px; height:88px; margin-bottom:.9rem; color:var(--sage); }
@media (max-width:640px){ .ege-brand__mark{ width:58px; height:58px; } }
/* Montserrat is wider than the old body face, and the subtitle is set in it, so the brand
   block was being squeezed by the seven item nav and wrapping onto two lines. It does not
   shrink and it does not wrap. */
.ege-brand{ flex:none; }
.ege-brand__name{ font-family:var(--font-display); font-weight:var(--wt-display); font-size:1.3rem; color:var(--forest); white-space:nowrap; }
.ege-brand__sub{ font-family:var(--font-body); font-size:.55rem; letter-spacing:.11em; text-transform:uppercase; color:var(--teal); margin-top:.22rem; white-space:nowrap; }

.ege-nav{ display:flex; align-items:center; gap:1.6rem; }
/* Seven top level items in Montserrat, which is wider than Inter, wrapped every label onto
   two lines at 1440px. The client allows dropdowns "if needed to prevent the main navigation
   from becoming crowded", so the items stay and the type tightens instead: no wrapping, a
   smaller gap, and a slightly smaller size that still clears 16px on the tap target. */
.ege-nav__list{ display:flex; align-items:center; gap:1.15rem; list-style:none; margin:0; padding:0; }
.ege-nav__list > li > a{ white-space:nowrap; font-size:.95rem; }
@media (min-width:961px) and (max-width:1200px){
  .ege-nav__list{ gap:.85rem; }
  .ege-nav__list > li > a{ font-size:.88rem; }
}
.ege-nav__list a{ text-decoration:none; color:var(--ink); font-size:.95rem; font-weight:500; }
.ege-nav__list a:hover{ color:var(--forest); }
.ege-nav__list li{ position:relative; }
.ege-nav__list .sub-menu{
  position:absolute; top:calc(100% + .7rem); left:-1rem; min-width:240px; background:#fff;
  border:1px solid rgba(9,72,56,.12); border-radius:var(--radius-card); padding:.6rem; list-style:none;
  box-shadow:0 18px 40px rgba(9,72,56,.13); display:none; flex-direction:column; gap:.15rem;
}
/* The panel opens .7rem below its parent, so the pointer crossed dead space on the way down,
   `li:hover` dropped, and the menu vanished before it could be used. This bridge spans that
   gap and belongs to the panel itself, so the panel counts as hovered while the pointer
   travels. It only exists while the panel is open, so it never blocks anything underneath. */
.ege-nav__list .sub-menu::before{
  content:''; position:absolute; left:0; right:0; top:-.9rem; height:.9rem;
}
.ege-nav__list li:hover > .sub-menu,
.ege-nav__list li:focus-within > .sub-menu,
.ege-nav__list .sub-menu:hover{ display:flex; }
.ege-nav__list .sub-menu a{ display:block; padding:.55rem .8rem; border-radius:8px; font-size:.92rem; }
.ege-nav__list .sub-menu a:hover{ background:var(--paper); }
/* Third level: initiatives inside a core program. Rendered inline in the parent panel,
   indented with a rule, rather than as another flyout. Always display:flex because the
   panel it lives in is the thing that opens and closes. */
.ege-nav__list .sub-menu .sub-menu{
  position:static; display:flex; min-width:0; background:none; border:0; border-radius:0;
  box-shadow:none; padding:.1rem 0 .35rem 1.35rem; margin:0; gap:0;
}
.ege-nav__list .sub-menu .sub-menu::before{
  content:''; position:absolute; left:1rem; top:.15rem; bottom:.4rem; right:auto;
  width:1px; height:auto; background:rgba(9,72,56,.16);
}
.ege-nav__list .sub-menu .sub-menu a{ font-size:.86rem; color:var(--muted); padding:.4rem .8rem; }
.ege-nav__list .sub-menu .sub-menu a:hover{ color:var(--forest); }

.ege-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.5rem; }
.ege-burger span{ width:24px; height:2px; background:var(--forest); display:block; }

/* ---------- hero ---------- */
.ege-hero{ position:relative; min-height:min(88vh, 760px); display:flex; align-items:center; overflow:hidden; background:var(--forest); }
/* Inner pages get a shorter hero. At full height the reader scrolls past a picture they
   have already seen before reaching a single word of the page they asked for. */
body:not(.home) .ege-hero{ min-height:min(58vh, 480px); }
body:not(.home) .ege-hero__inner{ padding:3.5rem 0; }
body:not(.home) .ege-section:first-of-type{ padding-top:4rem; }
.ege-hero__media{ position:absolute; inset:0; }
.ege-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
/* Gradient falls off faster than a straight 90->35 ramp. On the redwood hero a slow
   falloff left the children in the centre of frame muddied at ~.72 opacity. Text stays
   legible over the left third; the subject keeps its light. */
.ege-hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(8,72,56,.88) 0%,
      rgba(8,72,56,.70) 26%,
      rgba(8,72,56,.30) 58%,
      rgba(8,72,56,.10) 100%),
    linear-gradient(0deg, rgba(8,72,56,.26) 0%, rgba(8,72,56,0) 45%);
}
/* No photo yet: keep the forest ground so the page never looks broken. */
/* No photograph: there is no scrim to draw, and a 480px block of flat green is a lot of
   nothing. Size it to its own content instead. The legal pages are the only pages that
   reach this state. */
.ege-hero--flat::after{ background:none; }
.ege-hero--flat{ min-height:0; }
body:not(.home) .ege-hero--flat{ min-height:0; }
body:not(.home) .ege-hero--flat .ege-hero__inner{ padding:3.2rem 0; }
.ege-hero__inner{ position:relative; z-index:2; padding:6rem 0; max-width:52rem; }
.ege-hero h1{ color:#fff; font-size:clamp(2.4rem, 5.2vw, 4.1rem); line-height:1.04; margin:.6rem 0 1.4rem; }
.ege-hero h1 em{ color:inherit; font-style:italic; }
.ege-hero__intro{ color:rgba(255,255,255,.94); font-size:1.09rem; line-height:1.65; max-width:38rem; margin-bottom:2rem; }
.ege-hero__cta{ display:flex; gap:.9rem; flex-wrap:wrap; }

/* ---------- eyebrow ---------- */
.ege-eyebrow{
  display:flex; align-items:center; gap:.9rem; font-family:var(--font-body);
  font-size:.72rem; letter-spacing:.19em; text-transform:uppercase; font-weight:var(--wt-sub);
  color:var(--green-mid); margin:0 0 1rem;
}
.ege-eyebrow::before{ content:""; width:34px; height:2px; background:var(--green-mid); flex:none; }
.ege-eyebrow--light{ color:var(--sage-type); }
.ege-eyebrow--light::before{ background:var(--sage); }
.ege-hero .ege-eyebrow{ color:var(--sage-type); }
.ege-hero .ege-eyebrow::before{ background:var(--sage); }

/* ---------- sections ---------- */
/* Every section paints its own background. Do not rely on inheriting the body colour:
   the reveal animation promotes children to their own compositing layer, and a section
   with no background of its own renders against the compositor's backdrop instead of
   the page. That showed up as a dark band where paper was expected. */
.ege-section{ padding:5.5rem 0; background:#fff; }
.ege-section--paper2{ background:var(--paper); }
.ege-section--forest{ background:var(--forest); color:#fff; }
.ege-section--forest h2, .ege-section--forest h3{ color:#fff; }
.ege-section__lead{ max-width:44rem; }
.ege-section h2{ font-size:clamp(1.9rem, 3.4vw, 2.9rem); line-height:1.12; margin:0 0 1.1rem; max-width:24ch; }
.ege-section p{ line-height:1.72; color:var(--muted); }

/* Measure. Prose set across the full 1180px wrap is unreadable: the eye loses the line
   on the return sweep. Cap running text at a comfortable measure; grids and cards are
   unaffected because they set their own widths. */
.ege-section > .ege-wrap > p,
.ege-section > .ege-wrap > ul,
.ege-section > .ege-wrap > ol,
.ege-section > .ege-wrap > h3,
.ege-section > .ege-wrap > blockquote,
.ege-section__lead p{ max-width:68ch; }
.ege-section > .ege-wrap > h2{ margin-top:2.6rem; }
.ege-section > .ege-wrap > h2:first-child{ margin-top:0; }
.ege-section > .ege-wrap > ul,
.ege-section > .ege-wrap > ol{ line-height:1.75; color:var(--muted); padding-left:1.2rem; }
.ege-section > .ege-wrap > ul li,
.ege-section > .ege-wrap > ol li{ margin-bottom:.5rem; }
.ege-section > .ege-wrap > ul strong,
.ege-section > .ege-wrap > ol strong{ color:var(--forest); }
.ege-section > .ege-wrap > hr{ border:0; border-top:1px solid rgba(9,72,56,.15); margin:2.5rem 0; max-width:68ch; }
.ege-placeholder{ max-width:68ch; }
.ege-section--forest p{ color:rgba(255,255,255,.86); }

/* ---------- cards ---------- */
.ege-grid{ display:grid; gap:1.5rem; }
.ege-grid--2{ grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
/* Capped at three, which is what the class says.
   `auto-fit` with a 260px floor fits FOUR tracks at desktop width, so a six item set laid
   out as 4 + 2 with two empty cells and a ragged tail: that was the gap under the youth
   quotes on Impact and under the board cards. Three tracks give 3 + 3, and each card is
   wider and easier to read. */
.ege-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:1000px){ .ege-grid--3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){  .ege-grid--3{ grid-template-columns:1fr; } }
/* `auto-fill` and not `auto-fit`: the partner groups on /partners/ hold one, two or four
   members each, and auto-fit collapses the empty tracks, so a lone card stretched the full
   1180px with one line of text in it. auto-fill keeps the tracks, so a card is the same
   width whichever group it sits in. */
.ege-grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1000px){ .ege-grid--4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){  .ege-grid--4{ grid-template-columns:1fr; } }

.ege-card{
  background:#fff; border-radius:var(--radius-card); padding:1.9rem;
  border:1px solid rgba(9,72,56,.09); border-top:3px solid var(--forest);
  box-shadow:0 2px 14px rgba(9,72,56,.05);
}
.ege-card--vision{ border-top-color:var(--green-mid); }
.ege-card h3{ font-size:1.05rem; margin:0 0 .7rem; }
.ege-card p{ margin:0; font-size:.98rem; }
.ege-card__label{
  font-family:var(--font-body); font-size:.7rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--green-mid); font-weight:var(--wt-sub); margin:0 0 .6rem;
}

/* pillars: a rule above, no box */
.ege-pillar{ border-top:1px solid rgba(9,72,56,.18); padding-top:1.2rem; }
.ege-pillar h3{ font-size:1.12rem; margin:0 0 .5rem; color:var(--forest); }
.ege-pillar p{ margin:0; font-size:.95rem; }

/* ---------- photo cards ---------- */
.ege-photocard{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:#fff; border-radius:var(--radius-card); overflow:hidden;
  border:1px solid rgba(9,72,56,.09);
  box-shadow:0 2px 14px rgba(9,72,56,.05);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.ege-photocard:hover{ transform:translateY(-5px); box-shadow:0 20px 42px rgba(9,72,56,.15); }
.ege-photocard__media{ position:relative; display:block; aspect-ratio:4/3; background:var(--forest); }
.ege-photocard__media img{ width:100%; height:100%; object-fit:cover; }
.ege-photocard__body{ display:block; padding:1.35rem 1.5rem 1.6rem; }
.ege-photocard__title{
  display:block; font-family:var(--font-body); font-weight:var(--wt-sub);
  font-size:1.15rem; color:var(--forest); margin-bottom:.45rem; line-height:1.25;
}
.ege-photocard__text{ display:block; font-size:.94rem; line-height:1.6; color:var(--muted); }
.ege-photocard__step{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  font-family:var(--font-body); font-weight:700; font-size:.82rem;
  background:var(--gold); color:var(--ink);
  width:2.1rem; height:2.1rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
/* The pipeline reads as one journey: a connecting rule between the steps. */
@media (min-width:961px){
  .ege-pipeline{ position:relative; }
  .ege-pipeline::before{
    content:""; position:absolute; top:calc(2.1rem / 2 + .85rem); left:12%; right:12%;
    height:2px; background:repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 20px);
    opacity:.55; z-index:0;
  }
}

/* ---------- stats ---------- */
/* Client 2026-08-28 lists "Statistics" under Montserrat, so the figures are body font at
   display weight rather than the serif. */
.ege-stat__fig{
  font-family:var(--font-body); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(3rem, 6vw, 4.6rem); line-height:1; color:var(--forest); display:block;
}
.ege-stat__label{ margin-top:.7rem; font-size:.98rem; line-height:1.5; }

/* ---------- quote ---------- */
.ege-quote{ border-left:3px solid var(--green-mid); padding-left:1.4rem; }
.ege-quote p{ font-family:var(--font-display); font-style:italic; font-size:1.32rem; line-height:1.5; color:var(--forest); margin:0; }
.ege-quote cite{ display:block; margin-top:.8rem; font-family:var(--font-body); font-style:normal; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
/* A press quote sits inside a card or a feature body, so it steps down from the
   standalone pull quote rather than competing with the heading above it. */
.ege-card .ege-quote{ margin:.9rem 0 1rem; }
.ege-card .ege-quote p{ font-size:1.05rem; }
.ege-feature__body .ege-quote{ margin:1.2rem 0 1.4rem; }

/* ---------- press cards ----------
   A press card carries a photograph, a description and a link out. The media has to bleed to
   the card edges, and .ege-card has 1.9rem of padding, so it is pulled out by exactly that
   and the radius is clipped to match the card's own top corners. The card's 3px forest
   border-top sits above the image, which is what keeps it reading as the same component. */
.ege-card--press{
  padding-top:0; overflow:hidden;
  /* Flex column so the link can be pushed to the bottom. Grid already stretches every card
     in a row to the same height, so with the link bottom-aligned the whole row lines up
     regardless of how long each description runs. Without this the link sat directly under
     its own text and every card ended at a different height. */
  display:flex; flex-direction:column;
}
.ege-card--press > p:last-child{ margin-top:auto; padding-top:.6rem; }
.ege-press__media{
  display:block; margin:0 -1.9rem 1.3rem; aspect-ratio:4/3;
  position:relative; overflow:hidden; background:var(--forest);
}
.ege-press__media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Empty slot: the ring mark, never a note to the developer on a public page. */
.ege-press__noimg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 50%, transparent 26%, rgba(255,255,255,.16) 27%, transparent 28%),
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(255,255,255,.13) 39%, transparent 40%),
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(255,255,255,.10) 51%, transparent 52%);
}
.ege-press__desc{ color:var(--muted); font-size:.94rem; line-height:1.6; margin:0 0 1rem; }
/* Two links in one card stack rather than sit side by side: side by side they wrap mid-label
   in a four-track column and the arrows end up on their own lines. */
.ege-press__links{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; margin:0; }
.ege-card--press .ege-quote{ margin:0 0 1rem; }
@media (max-width:560px){ .ege-press__media{ margin-inline:-1.9rem; } }


/* ---------- split ---------- */
.ege-split{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.ege-split img{ border-radius:var(--radius-card); }

/* ---------- footer ---------- */
.ege-footer{ background:var(--forest); color:rgba(255,255,255,.82); padding:4rem 0 1.5rem; margin-top:0; }
.ege-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; }
.ege-footer .ege-brand__name{ color:#fff; font-size:1.3rem; display:block; }
.ege-footer .ege-brand__sub{ color:var(--sage-type); display:block; font-size:.68rem; }
/* Candid seal. Sized so it reads as a credential, not a logo competing with the wordmark. */
.ege-footer__seal{ margin:1.4rem 0 0; }
.ege-footer__seal img{ width:92px; height:auto; display:block; border-radius:4px; }
.ege-footer__tag{ margin-top:1rem; font-family:var(--font-body); font-style:italic; font-size:.92rem; color:rgba(255,255,255,.78); }
.ege-footer__h{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sage-type); font-family:var(--font-body); font-weight:var(--wt-sub); margin:0 0 1rem; }
.ege-footer__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.ege-footer__list a{ color:rgba(255,255,255,.82); text-decoration:none; font-size:.95rem; }
.ege-footer__list a:hover{ color:#fff; text-decoration:underline; }
.ege-footer__note{ margin-top:1rem; font-size:.86rem; color:rgba(255,255,255,.6); line-height:1.6; }
.ege-footer__legal{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14); font-size:.83rem; color:rgba(255,255,255,.62); } /* .55 computed 4.37:1 on forest and failed AA. .62 is 5.13:1 */

/* ---------- placeholder, for content she has not supplied ---------- */
.ege-placeholder{
  border:1px dashed var(--muted); border-radius:var(--radius-card);
  padding:1.4rem 1.6rem; background:rgba(92,107,102,.06); color:var(--muted);
  font-size:.93rem; line-height:1.6;
}
.ege-placeholder strong{ display:block; font-family:var(--font-body); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.35rem; }

/* ---------- accessibility ---------- */
/* Gold alone is 2.18:1 on white, 2.16 on ivory and 1.72 on the teal tint, so on most of
   the site the focus ring failed the 3:1 non-text minimum. It was never removed, just
   invisible. No single colour clears 3:1 against both white and forest, so the ring is two
   tone: the dark outer edge carries it on light grounds (16.91:1 on white) and the gold
   carries it on the dark bands (4.92:1 on forest). */
a:focus-visible, button:focus-visible, .ege-btn:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px;
  box-shadow:0 0 0 6px var(--green-dark);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .ege-footer__grid{ grid-template-columns:1fr; }
  .ege-split{ grid-template-columns:1fr; gap:2rem; }
  .ege-burger{ display:flex; }
  .ege-nav{
    position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column;
    align-items:flex-start; gap:0; padding:1.2rem 1.25rem 2rem; display:none;
    border-bottom:1px solid rgba(9,72,56,.12); max-height:80vh; overflow-y:auto;
    box-shadow:0 14px 28px rgba(9,72,56,.12);
  }
  .ege-nav.is-open{ display:flex; }
  .ege-nav__list{ flex-direction:column; align-items:flex-start; gap:.2rem; width:100%; }
  .ege-nav__list > li{ width:100%; border-bottom:1px solid rgba(9,72,56,.07); }
  .ege-nav__list > li > a{ display:block; padding:.85rem 0; }
  .ege-nav__list .sub-menu{ position:static; display:flex; box-shadow:none; border:0; padding:0 0 .6rem .8rem; }
  .ege-nav__list .sub-menu::before{ display:none; }
  .ege-nav__list .sub-menu .sub-menu{ padding:0 0 .4rem 1rem; }
  .ege-nav__list .sub-menu .sub-menu::before{ display:block; left:.35rem; }
  .ege-nav__donate{ margin-top:1rem; }
  .ege-hero__inner{ padding:4rem 0; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .ege-btn:hover{ transform:none; }
}

/* ---------- footer social ----------
   Text labels, not an icon font: nothing loads from outside and a screen reader reads the
   network name. Renders only when EGE has supplied a handle. */
.ege-social{ list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; }
.ege-social a{
  font-family:var(--font-body); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sage-type); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px;
}
.ege-social a:hover{ color:#fff; border-bottom-color:var(--sage); }

/* Donate: what a gift pays for. A caption under each photograph, not over it, so the text is
   never fighting a bright frame the way the photo band eyebrows were. */
.ege-givecard{ margin:0; }
.ege-givecard__media{
  display:block; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius-card); background:var(--forest);
}
.ege-givecard__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ege-givecard figcaption{
  margin-top:.7rem; font-size:.9rem; line-height:1.5; color:var(--muted);
}