/* EGE layout bands.
   Loaded after components.css. Tokens only, no hard-coded colours or fonts.

   Why this file exists
   --------------------
   The first build composed every page as a hero followed by one narrow column of
   prose. The information was correct and the result read as a Word document: a single
   column repeated down the page has no rhythm, and it leaves roughly 45% of the screen
   empty on every inner page. The approved prototype does not work that way. It
   alternates image and text, breaks the page open with full-bleed photography, sets
   figures against a dark ground, and closes with somewhere to go next.

   These are the bands a page is assembled from instead.

   Rules that apply to everything below:
     - Every band paints its own background. Anything that gets a transform, opacity or
       will-change and inherits its background renders against the compositor backdrop
       instead of the page. That already showed up once as a section turning dark grey.
     - Photography is structure, not decoration. A band with no image falls back to a
       coloured ground with the ring motif, never to an empty box.
     - Nothing here assumes an image is landscape. Her archive is 75% portrait once EXIF
       rotation is applied, so portrait slots are first-class, not an afterthought.
*/

/* ---------- section rhythm ----------
   Uniform padding all the way down a page is a large part of what makes it feel like a
   document rather than a designed page. */
.ege-section{ position:relative; overflow-x:clip; }
/* `overflow-x:clip` and not `hidden`, deliberately: hidden would make every section a
   scroll container and break the sticky aside in `ege-layout`. Clip only clips. */
.ege-section--tight{ padding:3.4rem 0; }
.ege-section--loose{ padding:7.5rem 0; }
.ege-section--flush{ padding:0; }
.ege-section > .ege-wrap{ position:relative; z-index:1; }

/* ---------- tree-ring motif ----------
   Her mark is a tree-ring log cross-section, so the motif the brand guide asks for is
   the brand itself rather than a pattern laid over it. The geometry is the real vector
   path data from the logo, never drawn circles. Kept faint: above about 7% it starts
   competing with the type. */
/* Scaled up 2026-09-07. Client: "make it much larger like it is part of the page, not simply
   a recurring element", with her EGE Out! Facilitator Binder cover as the reference: there the
   ring runs about three quarters of the page height, cropped hard by the edge, and is so pale
   it reads as paper texture rather than as a graphic.

   Roughly doubled: 44% to 76% of the host width, 36% to 64%. **Opacity comes DOWN as the
   scale goes up**, .05 to .035. A mark covering four times the area at the same opacity is
   four times the ink on the page, and the note above this rule, that above about 7% it starts
   competing with the type, was written for a mark a quarter of this size. Bigger and fainter
   is the whole point of her reference. */
.ege-rings{
  position:absolute; pointer-events:none; z-index:0;
  color:var(--forest); opacity:.035; line-height:0;
}
.ege-rings svg{ width:100%; height:100%; display:block; }
.ege-rings--tr{ top:-22%; right:-14%; width:min(62rem,76%); aspect-ratio:1; }
.ege-rings--bl{ bottom:-26%; left:-16%; width:min(52rem,64%); aspect-ratio:1; }
/* The motif bleeds outside its host on purpose (right:-5%, left:-7%), so the host has to
   clip it. It did not, and the 5% right bleed added 70px to the document width, which is
   why the whole site scrolled sideways with a blank strip on the right. Hosts that already
   clip: `ege-hero`, `ege-photoband`, `ege-cta`. This catches every other host, now and
   later, without having to remember to clip each new one. */
*:has(> .ege-rings){ overflow-x:clip; }
.ege-section--forest .ege-rings{ color:#fff; opacity:.07; }

/* ---------- lead ----------
   The opening statement of a page: the claim on the left, the facts on the right. This
   is what stops an inner page opening with a lone paragraph against 600px of paper. */
.ege-lead{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:4.5rem; align-items:start; }
.ege-lead h2{ font-size:clamp(2rem, 3.9vw, 3.1rem); max-width:18ch; margin-top:0; }
.ege-lead > div > p{ max-width:58ch; font-size:1.05rem; }
.ege-facts{
  background:var(--paper-2); border-radius:var(--radius-card);
  padding:1.8rem 1.8rem 1.6rem; border-top:3px solid var(--green-mid);
}
.ege-section--paper2 .ege-facts{ background:var(--paper); }
.ege-facts dl{ margin:0; }
.ege-facts dt{
  font-family:var(--font-body); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-mid); font-weight:var(--wt-sub); margin-top:1.2rem;
}
.ege-facts dt:first-of-type{ margin-top:0; }
.ege-facts dd{
  margin:.3rem 0 0; font-family:var(--font-body); font-weight:var(--wt-sub);
  font-size:1.02rem; line-height:1.4; color:var(--forest);
}
.ege-facts dd small{
  display:block; margin-top:.2rem; font-family:var(--font-body); font-weight:var(--wt-body);
  font-size:.87rem; line-height:1.5; color:var(--muted);
}

/* ---------- feature: image and text, alternating ----------
   The workhorse band. A page of these alternating left and right is most of the
   difference between a story and a report. */
.ege-feature{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4rem; align-items:center; }
.ege-feature + .ege-feature{ margin-top:5.5rem; }
.ege-feature--flip .ege-feature__media{ order:2; }
.ege-feature__media{
  position:relative; border-radius:var(--radius-card); overflow:hidden;
  background:var(--forest); aspect-ratio:4/3;
}
.ege-feature__media img{ width:100%; height:100%; object-fit:cover; }
.ege-feature--portrait .ege-feature__media{ aspect-ratio:4/5; }
/* A media cell holding something that already has its own shape, a 16:9 video for instance.
   The base cell forces aspect-ratio:4/3, so a 16:9 child left a strip of the cell's forest
   background unfilled beneath it, which the dead-space detector caught as a 349px band on the
   home page. Anything dropped into a feature cell must either fill 4/3 or clear the ratio. */
.ege-feature__media--bare{
  aspect-ratio:auto; background:none; overflow:visible; border-radius:0;
}
.ege-feature--tall .ege-feature__media{ aspect-ratio:3/4; }
.ege-feature__body h2{ margin-top:0; }
.ege-feature__body > p{ max-width:52ch; }
/* Caption sits on the photograph rather than under it, so the eye does not break the
   text column to read it. */
.ege-feature__cap{
  position:absolute; inset:auto 0 0 0; padding:2.6rem 1.3rem .95rem;
  background:linear-gradient(0deg, rgba(8,72,56,.88) 0%, rgba(8,72,56,0) 100%);
  color:rgba(255,255,255,.94); font-size:.83rem; line-height:1.45;
}

/* ---------- pull quote inside a column ---------- */
.ege-pull{ border-left:3px solid var(--green-mid); padding-left:1.25rem; margin:1.9rem 0; }
.ege-pull p{
  font-family:var(--font-display); font-style:italic; font-size:1.16rem;
  line-height:1.5; color:var(--forest); margin:0;
}
.ege-pull cite{
  display:block; margin-top:.55rem; font-family:var(--font-body); font-style:normal;
  font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.ege-section--forest .ege-pull{ border-left-color:var(--sage); }
.ege-section--forest .ege-pull p{ color:#fff; }
.ege-section--forest .ege-pull cite{ color:rgba(255,255,255,.6); }

/* ---------- link with an arrow ----------
   Used where the action is "read on" rather than "do something". A page made entirely
   of pill buttons has no hierarchy left. */
.ege-link{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font-family:var(--font-body); font-weight:var(--wt-sub); font-size:.95rem;
  color:var(--forest); border-bottom:2px solid var(--green-mid); padding-bottom:.15rem;
  transition:gap .2s ease, color .2s ease;
}
.ege-link::after{ content:"\2192"; font-size:1.05em; line-height:1; }
.ege-link:hover{ gap:.75rem; color:var(--green-mid); }
.ege-section--forest .ege-link,
.ege-photoband .ege-link{ color:#fff; }

/* ---------- full-bleed photo band ----------
   Breaks the page open between two stretches of prose, and carries the transition into
   a different subject. */
.ege-photoband{
  position:relative; min-height:clamp(340px, 44vw, 540px);
  display:flex; align-items:flex-end; overflow:hidden; background:var(--forest);
}
.ege-photoband__media{ position:absolute; inset:0; }
.ege-photoband__media img{ width:100%; height:100%; object-fit:cover; }
.ege-photoband::after{
  content:""; position:absolute; inset:0;
  /* The text is bottom-aligned, so the scrim has to be heaviest where the words are. The first
     version reached only .36 opacity at 46% and the gold eyebrow was close to illegible over a
     bright frame: the Uganda photograph on the home page is pale tent stripes exactly where the
     heading sits. This keeps the top of the frame open and holds the type at AA. */
  background:linear-gradient(0deg,
    rgba(8,72,56,.92) 0%,
    rgba(8,72,56,.70) 34%,
    rgba(8,72,56,.28) 62%,
    rgba(8,72,56,.04) 100%);
}
.ege-photoband__inner{ position:relative; z-index:2; padding:3.6rem 0 3.1rem; max-width:46rem; }
.ege-photoband h2{ color:#fff; font-size:clamp(1.7rem,3.2vw,2.6rem); margin:0 0 .8rem; max-width:20ch; }
.ege-photoband p{ color:rgba(255,255,255,.92); max-width:46ch; margin:0 0 1.4rem; line-height:1.65; }
/* White, not sage. Sage is `#87b9ae`, which measures 2.17:1 on a light ground: fine over a
   dark forest photograph and illegible over a pale one. It has now been caught three times on
   three different bands, so it is fixed at the rule rather than worked around per page by
   deleting the eyebrow. White inherits the same scrim the headline already relies on. */
.ege-photoband .ege-eyebrow{ color:rgba(255,255,255,.92); }
.ege-photoband .ege-eyebrow::before{ background:rgba(255,255,255,.92); }
/* No photograph available: a forest ground with the ring motif, never an empty box. */
.ege-photoband--flat::after{ background:none; }

/* ---------- photo mosaic with an embedded figure ----------
   Four cells, one of which is a number rather than a picture. It makes a statistic feel
   like part of the place instead of a chart. */
.ege-mosaic{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; }
.ege-mosaic__cell{
  border-radius:var(--radius-card); overflow:hidden; aspect-ratio:1; background:var(--paper-2);
}
.ege-mosaic__cell img{ width:100%; height:100%; object-fit:cover; }
.ege-mosaic__fig{
  background:var(--forest); color:#fff; border-radius:var(--radius-card); aspect-ratio:1;
  display:flex; flex-direction:column; justify-content:center; padding:1.5rem;
}
.ege-mosaic__fig b{
  font-family:var(--font-body); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(2rem,3.4vw,2.9rem); line-height:1; color:var(--teal-pale);
}
.ege-mosaic__fig span{ font-size:.89rem; line-height:1.45; color:rgba(255,255,255,.86); margin-top:.6rem; }

/* ---------- figures row ----------
   Replaces the bare grid of gold numbers. A rule under each figure makes the eye read
   four columns instead of one smear, and the row carries a method line, because a
   percentage with no denominator is exactly what a funder queries. */
.ege-figures{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2.4rem 2.2rem; }
.ege-figure{ border-bottom:1px solid rgba(9,72,56,.18); padding-bottom:1rem; }
.ege-figure__fig{
  display:block; font-family:var(--font-body); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(2.9rem,5.2vw,4.2rem); line-height:1; color:var(--green-mid);
}
.ege-figure__label{ margin:.85rem 0 0; font-size:.95rem; line-height:1.5; }
.ege-section--forest .ege-figure{ border-bottom-color:rgba(255,255,255,.22); }
.ege-section--forest .ege-figure__fig{ color:var(--sage); }
.ege-note{ margin-top:2.4rem; font-size:.87rem; line-height:1.6; color:var(--muted); max-width:78ch; }
.ege-section--forest .ege-note{ color:rgba(255,255,255,.62); }

/* ---------- ticked list ---------- */
.ege-check{ list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.ege-check li{ position:relative; padding-left:1.85rem; line-height:1.62; color:var(--muted); }
.ege-check li::before{
  content:""; position:absolute; left:.1rem; top:.4em; width:.7rem; height:.38rem;
  border-left:2px solid var(--green-mid); border-bottom:2px solid var(--green-mid);
  transform:rotate(-45deg);
}
.ege-check strong{ color:var(--forest); font-weight:var(--wt-sub); }
.ege-section--forest .ege-check li{ color:rgba(255,255,255,.86); }
.ege-section--forest .ege-check li::before{ border-color:var(--sage); }
.ege-section--forest .ege-check strong{ color:#fff; }

/* ---------- body layout: prose with a sticky aside ----------
   The direct fix for pages that ran as one column with 600px of dead paper beside every
   paragraph. Prose keeps its 68ch measure; the aside carries the facts, the links
   onward, a portrait, and any placeholder. */
.ege-layout{ display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:4.5rem; align-items:start; }

/* Compact variant, chosen in page.php when the body is under 90 words. The sidebar stops
   being a column and becomes a row beneath the prose, so a short page is short rather than
   a tall section with a screen of white in it. */
.ege-layout--compact{ grid-template-columns:minmax(0,1fr); gap:2.6rem; }
.ege-layout--compact .ege-aside{
  position:static; top:auto;
  flex-direction:row; flex-wrap:wrap; gap:1.2rem;
}
.ege-layout--compact .ege-aside__box{ flex:1 1 16rem; margin:0; }
.ege-layout--compact .ege-layout__main p,
.ege-layout--compact .ege-layout__main ul,
.ege-layout--compact .ege-layout__main ol{ max-width:64ch; }
@media (max-width:700px){
  .ege-layout--compact .ege-aside{ flex-direction:column; }
}
.ege-layout__main > :first-child{ margin-top:0; }
.ege-layout__main p,
.ege-layout__main ul,
.ege-layout__main ol,
.ege-layout__main blockquote{ max-width:68ch; }
.ege-layout__main p{ line-height:1.72; color:var(--muted); }
.ege-layout__main h2{ font-size:clamp(1.5rem,2.4vw,2rem); margin:2.9rem 0 .9rem; max-width:24ch; }
.ege-layout__main h3{ font-size:1.1rem; margin:2rem 0 .6rem; color:var(--forest); }
.ege-layout__main ul,
.ege-layout__main ol{ line-height:1.75; color:var(--muted); padding-left:1.2rem; }
.ege-layout__main li{ margin-bottom:.5rem; }
.ege-layout__main strong{ color:var(--forest); }
.ege-layout__main hr{ border:0; border-top:1px solid rgba(9,72,56,.15); margin:2.6rem 0; max-width:68ch; }

.ege-aside{ position:sticky; top:6rem; display:flex; flex-direction:column; gap:1.3rem; }
.ege-aside__box{
  background:var(--paper-2); border-radius:var(--radius-card);
  padding:1.45rem 1.55rem; border-top:3px solid var(--forest);
}
.ege-section--paper2 .ege-aside__box{ background:var(--paper); }
.ege-aside__h{
  font-family:var(--font-body); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-mid); font-weight:var(--wt-sub); margin:0 0 .9rem;
}
.ege-aside__box ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.62rem; }
.ege-aside__box li{ margin:0; }
.ege-aside__box a{
  color:var(--forest); text-decoration:none; font-size:.93rem; line-height:1.4;
  border-bottom:1px solid rgba(9,72,56,.22); padding-bottom:.08rem;
}
.ege-aside__box a:hover{ border-bottom-color:var(--green-mid); }
.ege-aside__box p{ margin:0; font-size:.93rem; line-height:1.6; color:var(--muted); }
.ege-aside__box p + p{ margin-top:.7rem; }
.ege-aside__media{
  border-radius:var(--radius-card); overflow:hidden; aspect-ratio:4/5; background:var(--forest);
  position:relative;
}
.ege-aside__media img{ width:100%; height:100%; object-fit:cover; }
.ege-aside__media figcaption{
  position:absolute; inset:auto 0 0 0; padding:2.2rem .9rem .75rem;
  background:linear-gradient(0deg, rgba(8,72,56,.9) 0%, rgba(8,72,56,0) 100%);
  color:rgba(255,255,255,.92); font-size:.78rem; line-height:1.4;
}

/* ---------- people ---------- */
.ege-person{ display:flex; flex-direction:column; }
.ege-person__media{
  border-radius:var(--radius-card); overflow:hidden; aspect-ratio:4/5;
  background:var(--paper-2); margin-bottom:1rem;
}
.ege-person__media img{ width:100%; height:100%; object-fit:cover; }
.ege-person h3{ font-size:1.08rem; margin:0 0 .2rem; }
.ege-person__role{
  font-family:var(--font-body); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--green-mid); margin:0 0 .7rem;
}
.ege-person p{ font-size:.93rem; margin:0; line-height:1.6; color:var(--muted); }

/* ---------- partner strip ---------- */
.ege-logos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:1rem; }
.ege-logo{
  background:var(--paper); border:1px solid rgba(9,72,56,.10); border-radius:var(--radius-card);
  min-height:6.2rem; display:flex; align-items:center; justify-content:center;
  padding:1.1rem; text-align:center;
}
.ege-section--paper2 .ege-logo{ background:var(--paper); }
.ege-logo span{
  font-family:var(--font-body); font-weight:var(--wt-sub);
  font-size:.97rem; line-height:1.3; color:var(--forest);
}
.ege-logo img{ max-height:3.4rem; width:auto; object-fit:contain; }

/* ---------- closing call to action ----------
   Appended by the template to every page, so no page ends on a paragraph leaving the
   reader with nowhere to go. */
.ege-cta{ position:relative; background:var(--forest); color:#fff; overflow:hidden; padding:4.6rem 0; }
.ege-cta__inner{
  position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:3rem; align-items:center;
}
.ege-cta h2{ color:#fff; font-size:clamp(1.7rem,3vw,2.45rem); margin:0 0 .7rem; max-width:20ch; }
.ege-cta p{ color:rgba(255,255,255,.85); margin:0; max-width:50ch; line-height:1.65; }
.ege-cta__buttons{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:flex-end; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .ege-layout{ grid-template-columns:minmax(0,1fr) 17rem; gap:3rem; }
  .ege-lead{ gap:3rem; }
  .ege-feature{ gap:2.6rem; }
}
@media (max-width:900px){
  .ege-lead{ grid-template-columns:1fr; gap:2.2rem; }
  .ege-feature{ grid-template-columns:1fr; gap:1.8rem; }
  .ege-feature + .ege-feature{ margin-top:3.4rem; }
  .ege-feature--flip .ege-feature__media{ order:0; }
  .ege-layout{ grid-template-columns:1fr; gap:2.6rem; }
  .ege-aside{ position:static; }
  .ege-cta__inner{ grid-template-columns:1fr; gap:1.8rem; }
  .ege-cta__buttons{ justify-content:flex-start; }
  .ege-section--loose{ padding:4.5rem 0; }
  .ege-rings--tr,.ege-rings--bl{ width:20rem; }
}
@media (max-width:560px){
  .ege-mosaic{ gap:.7rem; }
  .ege-photoband__inner{ padding:2.6rem 0 2.2rem; }
  .ege-feature__media{ aspect-ratio:3/2; }
}

/* ---------- a media slot with no photograph yet ----------
   An empty media cell renders as a solid rectangle, which reads as a broken image
   rather than as missing content. Say what is needed instead. */
.ege-media-wanted{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:1.6rem; background:var(--paper-2);
  border:1px dashed var(--muted); border-radius:var(--radius-card);
  color:var(--muted); font-size:.9rem; line-height:1.55;
}
.ege-media-wanted strong{
  display:block; font-family:var(--font-body); font-size:.67rem; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:.4rem;
}

/* ---------- product card ----------
   Nothing is set up to sell yet, so most products carry no image and no live checkout.
   The card has to read as finished anyway, which is why the empty state is a labelled
   panel rather than a grey rectangle, and the button is replaced by an honest status. */
.ege-product{ display:flex; flex-direction:column; }
.ege-product__media{
  position:relative; aspect-ratio:1; border-radius:var(--radius-card); overflow:hidden;
  background:var(--paper); border:1px solid rgba(9,72,56,.10);
  display:flex; align-items:center; justify-content:center; margin-bottom:.9rem;
}
.ege-section--paper2 .ege-product__media{ background:var(--paper); }
.ege-product__media img{ width:100%; height:100%; object-fit:cover; }
.ege-product__noimg{
  font-family:var(--font-body); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-align:center; padding:0 1rem; line-height:1.5;
}
.ege-product h4{
  font-family:var(--font-body); font-weight:var(--wt-sub); font-size:1rem;
  color:var(--forest); margin:0 0 .25rem; line-height:1.25;
}
.ege-product__price{
  margin:0 0 .5rem; font-family:var(--font-body); font-weight:var(--wt-sub);
  font-size:.92rem; color:var(--green-mid);
}
.ege-product__note{ margin:0 0 .7rem; font-size:.86rem; line-height:1.55; color:var(--muted); }
.ege-product__soon{
  font-family:var(--font-body); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--green-mid); margin-top:auto;
}

/* Product grid uses auto-fill, not auto-fit.
   auto-fit collapses the empty tracks and stretches whatever is left, so a category
   holding two items rendered them as two 545px squares. auto-fill keeps the empty tracks,
   so a short category lines up with a long one and every card is the same size. */
.ege-grid--products{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }

/* ---------- form band ----------
   Fluent Forms ships its own styling. These rules only align it with the type scale and
   palette here, so a form does not look like a plugin dropped onto the page. */
.ege-formband{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:4rem; align-items:start; }
.ege-formband h2{ margin-top:0; }
/* Stacked variant, chosen in page.php when the intro is too short to hold its own column
   beside a full height form. Heading across the top, form centred underneath. */
.ege-formband--stacked{ grid-template-columns:minmax(0,1fr); gap:2.4rem; }
.ege-formband--stacked > div:first-child{ max-width:52rem; }
.ege-formband--stacked .ege-formband__form{ max-width:46rem; }
.ege-formband__form{ background:var(--paper); border-radius:var(--radius-card); padding:2rem; border-top:3px solid var(--forest); }
.ege-formband .ege-note{ margin-top:1.4rem; }

.ege-formband .ff-el-input--label label{
  font-family:var(--font-body); font-weight:var(--wt-sub); font-size:.9rem; color:var(--forest);
}
.ege-formband .ff-el-form-control{
  font-family:var(--font-body); font-size:.98rem; color:var(--ink);
  background:var(--paper-2); border:1px solid rgba(9,72,56,.62); border-radius:8px; padding:.75rem .9rem;
}
.ege-formband .ff-el-form-control:focus{ border-color:var(--forest); outline:2px solid var(--gold); outline-offset:1px; box-shadow:0 0 0 5px var(--green-dark); }
.ege-formband .ff-btn-submit{
  font-family:var(--font-body); font-weight:var(--wt-sub); border-radius:var(--radius-pill);
  padding:.85rem 1.8rem; border:0; background:var(--forest); color:#fff; cursor:pointer;
}
.ege-formband .ff-btn-submit:hover{ background:var(--green-mid); }
.ege-formband .ff-el-is-error .ff-el-form-control{ border-color:var(--error); border-width:2px; }
.ege-formband .error-text, .ege-formband .text-danger{ color:var(--error); font-size:.85rem; }

@media (max-width:900px){
  .ege-formband{ grid-template-columns:1fr; gap:2rem; }
  .ege-formband__form{ padding:1.4rem; }
}

/* ---------- journey rail ----------
   The two maps, BUILD-PLAN section 6.6. A rail rather than drawn geography: places show
   their relationship to each other, which is the claim the page can actually support, and
   read left to right they say what the page says, that EGE reaches outward from
   Sacramento.

   The connecting line is drawn per stop rather than as one element behind the row, so it
   can change from solid to dashed at the point where built work becomes planned work, and
   so it reflows correctly when the rail stacks on a narrow screen. */
.ege-rail{ margin-top:2.4rem; }
.ege-rail__track{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:0;
}
.ege-rail__stop{ position:relative; padding:0 1.2rem; }
.ege-rail__stop:first-child{ padding-left:0; }
.ege-rail__stop:last-child{ padding-right:0; }

.ege-rail__media{
  aspect-ratio:4/3; border-radius:var(--radius-card); overflow:hidden;
  background:var(--paper); border:1px solid rgba(9,72,56,.10);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem;
}
.ege-rail__media img{ width:100%; height:100%; object-fit:cover; }
.ege-rail__noimg{
  font-family:var(--font-body); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-align:center; padding:0 1rem;
}

/* The rail itself. The line runs the full width of the stop and the marker sits on it. */
.ege-rail__line{ position:relative; height:2px; background:var(--forest); opacity:.22; margin-bottom:1.1rem; }
.ege-rail__stop:first-child .ege-rail__line{ margin-left:8px; }
.ege-rail__stop:last-child .ege-rail__line{ margin-right:8px; }
.ege-rail__stop--dashed .ege-rail__line{
  background:none;
  border-top:2px dashed var(--teal); opacity:.75; height:0;
}
.ege-rail__dot{
  position:absolute; left:0; top:50%; transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%; background:var(--forest);
}
.ege-rail__stop--emerging .ege-rail__dot{ background:var(--green-mid); }
.ege-rail__stop--future .ege-rail__dot{ background:var(--paper); border:2.5px solid var(--teal); }
.ege-section--paper2 .ege-rail__stop--future .ege-rail__dot{ background:var(--paper-2); }

.ege-rail__body h3{ font-size:1.12rem; margin:0 0 .25rem; color:var(--forest); }
.ege-rail__region{
  margin:0 0 .6rem; font-family:var(--font-body); font-size:.78rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted);
}
.ege-rail__state{
  margin:0 0 .7rem; font-family:var(--font-body); font-weight:var(--wt-sub); font-size:.82rem;
  color:var(--green-mid);
}
.ege-rail__stop--future .ege-rail__state{ color:var(--teal); }
.ege-rail__blurb{ margin:0; font-size:.93rem; line-height:1.6; color:var(--muted); }

/* Compact variant, used where the stops are neighbourhoods and there is no photograph. */
.ege-rail--compact .ege-rail__track{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }

@media (max-width:760px){
  /* Stacked: the rail turns vertical, so the line runs down the left of each stop. */
  .ege-rail__track{ grid-template-columns:1fr; gap:2rem; }
  .ege-rail__stop{ padding:0 0 0 1.6rem; }
  .ege-rail__line{
    position:absolute; left:0; top:.4rem; bottom:-2rem; width:2px; height:auto; margin:0;
  }
  .ege-rail__stop--dashed .ege-rail__line{
    border-top:0; border-left:2px dashed var(--teal); width:0;
  }
  .ege-rail__stop:last-child .ege-rail__line{ bottom:auto; height:1.2rem; }
  .ege-rail__dot{ left:50%; top:.5rem; }
  .ege-rail__media{ margin-bottom:1rem; }
}

/* ---------- search and results ----------
   Her old site had no search box at all, which is part of why 486 spam posts sat there
   unnoticed: nobody had a way to look inside the site. */
.ege-search{ display:flex; gap:.7rem; flex-wrap:wrap; margin:1.2rem 0 2rem; max-width:34rem; }
.ege-search__input{
  flex:1 1 16rem; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--paper-2); border:1px solid rgba(9,72,56,.18);
  border-radius:var(--radius-pill); padding:.8rem 1.2rem;
}
.ege-search__input:focus{ border-color:var(--forest); outline:2px solid var(--gold); outline-offset:1px; }
.ege-search__btn{ flex:0 0 auto; }
.screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap;
}

.ege-results{ display:flex; flex-direction:column; gap:1.6rem; margin-top:1rem; }
.ege-result{
  display:grid; grid-template-columns:9rem minmax(0,1fr); gap:1.4rem; align-items:start;
  padding-bottom:1.6rem; border-bottom:1px solid rgba(9,72,56,.12);
}
.ege-result__media{
  display:block; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--paper-2);
}
.ege-result__media img{ width:100%; height:100%; object-fit:cover; }
.ege-result__kind{
  margin:0 0 .3rem; font-family:var(--font-body); font-size:.68rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--green-mid); font-weight:var(--wt-sub);
}
.ege-result h2{ font-size:1.15rem; margin:0 0 .4rem; }
.ege-result h2 a{ color:var(--forest); text-decoration:none; }
.ege-result h2 a:hover{ border-bottom:2px solid var(--green-mid); }
.ege-result p{ margin:0; font-size:.94rem; }

.pagination .nav-links{ display:flex; gap:.6rem; flex-wrap:wrap; }
.pagination .page-numbers{
  display:inline-block; padding:.5rem .9rem; border-radius:8px; text-decoration:none;
  border:1px solid rgba(9,72,56,.18); color:var(--forest); font-size:.94rem;
}
.pagination .page-numbers.current{ background:var(--forest); color:#fff; border-color:var(--forest); }

@media (max-width:560px){
  .ege-result{ grid-template-columns:1fr; }
  .ege-result__media{ max-width:12rem; }
}

/* ---------- third-party embed ----------
   Zeffy's donation form is an iframe with no intrinsic height, so it needs a box with a
   height of its own. Tall on desktop, because the form has several steps and a scrollbar
   inside an iframe is a poor way to ask someone for money. */
.ege-embed{
  position:relative; width:100%; min-height:44rem;
  background:var(--paper); border-radius:var(--radius-card); overflow:hidden;
  border-top:3px solid var(--forest);
}
.ege-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:900px){ .ege-embed{ min-height:38rem; } }

/* A person with no photograph or no biography yet. Says so, rather than rendering an empty
   grey rectangle or a blank paragraph, which both read as a broken page. */
.ege-person__nophoto{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  padding:0 1rem; text-align:center;
  font-family:var(--font-body); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.ege-person__gap{ font-style:italic; color:var(--muted) !important; }

/* ---------- partner card ----------
   A logo wall says nothing. A line saying what a funder actually paid for says a great
   deal, so the card leads with the name and the work rather than with a picture. */
.ege-partnercard{
  background:var(--paper); border:1px solid rgba(9,72,56,.10); border-radius:var(--radius-card);
  padding:1.4rem 1.5rem; display:flex; flex-direction:column;
}
.ege-section--paper2 .ege-partnercard{ background:var(--paper); }
/* Logos arrived for 24 partners on 2026-09-07 and the old sizing did not survive contact
   with them. `max-height:3rem; width:auto` sizes purely by height, so a circular mark
   (Coastal Commission, Ocean Protection Council, State Parks) rendered as a 48px speck
   beside a 400px wordmark. Constraining BOTH axes lets a wide lockup be limited by width
   and a square mark stand at a readable size, so the row reads as one set. The fixed-height
   box stops cards jumping as logos of different ratios load. */
.ege-partnercard__logo{
  display:flex; align-items:center; min-height:4.4rem; margin-bottom:.7rem;
}
.ege-partnercard__logo img{ max-height:4.4rem; max-width:100%; width:auto; object-fit:contain; }
.ege-partnercard h4{
  font-family:var(--font-body); font-weight:var(--wt-sub); font-size:1.02rem;
  color:var(--forest); margin:0 0 .5rem; line-height:1.3;
}
.ege-partnercard p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--muted); }

/* Do not stretch partner cards to the tallest in the row. Most partners have a logo and a
   name only, a few carry a sentence about what they fund, and stretching left the short
   ones as tall boxes mostly full of nothing. Ragged bottoms read better than dead space. */
.ege-grid--4:has(> .ege-partnercard){ align-items:start; }


/* ---------- empty state ----------
   A listing with nothing in it still offers a next action. Quiet, not apologetic, and
   never a developer note. */
.ege-emptystate{
  margin-top:2rem; padding:2rem 2.2rem; background:#fff;
  border:1px solid rgba(8,72,56,.12); border-radius:var(--radius-card); max-width:44rem;
}
.ege-emptystate p{ margin:0 0 1rem; color:var(--ink); }
.ege-emptystate p:last-child{ margin-bottom:0; }

/* ---------- trip essentials list ----------
   A definition list used where a page has hard facts a reader scans rather than reads:
   dates, destination, price, deposit. Label above value, two columns on desktop. */
.ege-triplist{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.1rem 2.2rem; margin:1.6rem 0 0; max-width:44rem; }
.ege-triplist dt{
  font-family:var(--font-body); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:var(--wt-sub); color:var(--teal); margin:0;
}
.ege-triplist dd{ margin:.25rem 0 0; font-family:var(--font-body); font-weight:var(--wt-sub); font-size:1.02rem; line-height:1.4; color:var(--forest); }
@media (max-width:640px){ .ege-triplist{ grid-template-columns:1fr; } }

/* A denser variant, for a page where the spec list is reference rather than the point.
   Her note on the travel page: the trip details "take up a lot of the page ... versus main
   focus on this page". Multi-column rather than more grid columns, because a flat dl has no
   wrapper per pair, and columns lets the label sit above its own value the way the original
   comment above always intended. break-after and break-inside keep a label with its value. */
.ege-triplist--tight{
  display:block; columns:2; column-gap:2.8rem; max-width:none; margin-top:1.2rem;
}
.ege-triplist--tight dt{ break-after:avoid; page-break-after:avoid; }
.ege-triplist--tight dd{
  break-before:avoid; break-inside:avoid; page-break-inside:avoid;
  margin:.2rem 0 1.05rem; font-size:.97rem;
}
@media (max-width:760px){ .ege-triplist--tight{ columns:1; } }

/* ---------- empty media slots ----------
   Client asked for no development notes on public pages, so these no longer carry text. They
   still need to look deliberate rather than broken, so each shows a faint ring mark on the
   brand ground. --noimg-motif marks this block so it is not re-added twice. */
.ege-product__noimg, .ege-rail__noimg, .ege-person__nophoto{ --noimg-motif:1; }
.ege-product__noimg::after, .ege-rail__noimg::after, .ege-person__nophoto::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-product__noimg, .ege-rail__noimg, .ege-person__nophoto{ position:relative; overflow:hidden; }


/* ---------- video ----------
   A click-to-load facade. The iframe does not exist until someone presses play, so a page
   carrying a video still makes no third-party request and sets no third-party cookie, which
   is the same standard the self-hosted fonts hold the rest of the site to. */
.ege-video{ position:relative; }
/* Caption sits under the player, on the forest band, so it needs the light type colour.
   Client asked for it 2026-09-07: a line naming the film as a founder introduction. */
.ege-video__cap{
  margin:.9rem 0 0; font-size:.88rem; line-height:1.5;
  color:rgba(255,255,255,.78); max-width:46ch;
}
.ege-video__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radius-card); background:var(--forest);
  box-shadow:0 18px 46px rgba(9,72,56,.18);
}
.ege-video__frame img,
.ege-video__frame iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; object-fit:cover;
}
.ege-video__btn{
  position:absolute; inset:0; width:100%; height:100%;
  padding:0; border:0; background:none; cursor:pointer; display:block;
}
/* Bottom right, not centred. The convention is a centred play button and it is the wrong
   call for this particular poster: the film's cover is a designed end-card with the wordmark
   top left and "ROOTED IN LEGACY. GROWING THE FUTURE." across the middle left, so a centred
   button landed squarely on the words. The lower right of the frame is clear. Check the
   poster before assuming the centre is free. */
.ege-video__play{
  position:absolute; right:1.5rem; bottom:1.5rem;
  width:5rem; height:5rem; border-radius:50%;
  background:rgba(255,255,240,.94);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(1,34,22,.34);
  transition:transform .28s cubic-bezier(.22,.61,.36,1), background .28s ease;
}
.ege-video__play svg{ width:1.9rem; height:1.9rem; fill:var(--forest); margin-left:.22rem; }
.ege-video__btn:hover .ege-video__play{ transform:scale(1.08); background:#fffff0; }
.ege-video__btn:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){
  .ege-video__play{ transition:none; }
  .ege-video__btn:hover .ege-video__play{ transform:none; }
}
@media (max-width:640px){
  .ege-video__play{ width:3.6rem; height:3.6rem; right:1rem; bottom:1rem; }
  .ege-video__play svg{ width:1.4rem; height:1.4rem; }
}


/* ---------- partners, rebuilt 2026-09-07 ----------
   Three treatments instead of one grid of thirty-two identical boxes. What separates them is
   how much each record can actually carry: a funder that names a programme gets an editorial
   row, a delivery partner gets a card, and a name on the roster gets a tile. */

/* 1. Funders. The programme each grant pays for is the best content on this page and it used
      to be set in 0.9rem type inside a quarter-width card. Rows, with the logo held in a white
      tile so a dark wordmark is never asked to sit on the ivory ground. */
.ege-fundlist{ margin-top:2.4rem; border-top:1px solid rgba(9,72,56,.14); }
.ege-fundrow{
  display:grid; grid-template-columns:10rem 1fr; gap:2.4rem; align-items:center;
  padding:1.7rem 0; border-bottom:1px solid rgba(9,72,56,.14);
}
.ege-fundrow__tile{
  height:5.6rem; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(9,72,56,.10); border-radius:var(--radius-card);
  padding:.75rem; position:relative; overflow:hidden;
}
.ege-fundrow__tile img{ max-height:4rem; max-width:100%; width:auto; object-fit:contain; }
.ege-fundrow__body h3{
  margin:0 0 .35rem; font-family:var(--font-body); font-weight:var(--wt-sub);
  font-size:1.1rem; color:var(--forest); line-height:1.3;
}
.ege-fundrow__body p{ margin:0; color:var(--muted); font-size:1rem; line-height:1.65; max-width:62ch; }
.ege-fundrow__link{ margin-top:.5rem !important; }
@media (max-width:720px){
  .ege-fundrow{ grid-template-columns:1fr; gap:1.1rem; }
  .ege-fundrow__tile{ width:10rem; }
}

/* 2. Delivery partners. A partner card that actually has something to say, so the logo is
      allowed more room than on the roster tile. */
.ege-partnercard--lead{ background:#fff; }
.ege-partnercard--lead .ege-partnercard__logo{ min-height:3.6rem; }
.ege-partnercard--lead .ege-partnercard__logo img{ max-height:3.6rem; }

/* 3. The roster. Quiet by design: this band is proof of breadth, so it must not shout as
      loudly as the two above it. Small tiles, the name always printed under the mark so a
      reader never has to recognise a logo to know who it is. */
.ege-logowall__head{
  margin:2.6rem 0 1rem; font-family:var(--font-body); font-weight:var(--wt-sub);
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:.7rem;
}
.ege-logowall__head span{
  font-size:.72rem; letter-spacing:.06em; color:var(--forest);
  background:rgba(9,72,56,.08); border-radius:999px; padding:.15rem .55rem;
}
.ege-logowall{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.9rem; }
.ege-logowall__item{
  background:#fff; border:1px solid rgba(9,72,56,.09); border-radius:var(--radius-card);
  padding:1rem .75rem .85rem; display:flex; flex-direction:column; align-items:center;
  gap:.6rem; text-align:center;
}
.ege-logowall__mark{
  height:2.9rem; width:100%; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.ege-logowall__mark img{ max-height:2.9rem; max-width:100%; width:auto; object-fit:contain; }
.ege-logowall__name{ font-size:.76rem; line-height:1.35; color:var(--muted); }
@media (max-width:1080px){ .ege-logowall{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:760px){  .ege-logowall{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:480px){  .ege-logowall{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Empty marks carry the ring, never the words "logo to come". Same rule as products,
   rails and people: an empty slot has to look deliberate on a public page. */
/* An empty mark is a WATERMARK, not a filled block. The first version reused the forest
   ground that products and rails use for a missing photograph, and at logo-tile size that is
   not a subtle placeholder, it is a heavy dark brick: seven of them across the roster read as
   holes punched in the page, which was worse than the plain text card it replaced. A faint
   ring on the same white tile as every other logo keeps the row even. The rule from the
   photograph slots does not transfer to a 2.9rem tile. */
.ege-fundrow__tile--empty, .ege-logowall__mark--empty{ background:transparent; }
.ege-fundrow__tile--empty::after, .ege-logowall__mark--empty::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 50%, transparent 24%, rgba(9,72,56,.16) 25%, transparent 26%),
    radial-gradient(circle at 50% 50%, transparent 36%, rgba(9,72,56,.12) 37%, transparent 38%),
    radial-gradient(circle at 50% 50%, transparent 48%, rgba(9,72,56,.09) 49%, transparent 50%);
}

/* ---------- photo gallery ----------
   One component for every "gallery or carousel" the client asked for. Wide screens get a grid;
   narrow ones get a scroll-snap strip that swipes like a carousel. No JavaScript, so it cannot
   degrade to a single stuck photograph if a script fails, which is the usual failure mode of a
   slider on a site like this. */
.ege-gallery{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:2rem;
}
.ege-gallery__item{
  margin:0; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius-card); background:var(--forest);
}
.ege-gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){ .ege-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){
  .ege-gallery{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; gap:.8rem; padding-bottom:.5rem;
  }
  .ege-gallery__item{ flex:0 0 78%; scroll-snap-align:center; }
}

/* ---------- social enterprise pipeline ----------
   A diagram made of text. Five stages in reading order with arrows drawn by CSS, and a labelled
   loop-back line instead of a curved arrow: a curve that reads at desktop width turns into a
   scribble on a phone, and an arrow drawn in CSS cannot be read aloud anyway. */
/* Selector matches `.ege-section > .ege-wrap > ol` and adds the class, because that prose rule
   is (0,2,1) and a bare `.ege-flow` is (0,1,0) and simply loses. The first attempt at this fix
   set the right properties on the wrong-weight selector and changed nothing on the page. */
.ege-section > .ege-wrap > ol.ege-flow,
.ege-flow{
  /* max-width and padding-left are overridden deliberately. `.ege-section > .ege-wrap > ol`
     caps prose lists at reading width and indents them, which is right for a bulleted list and
     wrong for a five-column diagram: it squeezed the whole thing into the left half of the page
     with the stage text three words wide. A diagram is not prose. */
  list-style:none; margin:2.4rem 0 0; padding-left:0; max-width:none;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.6rem 1.6rem;
}
.ege-flow__step{ position:relative; }
.ege-flow__step + .ege-flow__step::before{
  content:""; position:absolute; left:-1.15rem; top:1.05rem;
  width:.55rem; height:.55rem; border-top:2px solid var(--green-mid); border-right:2px solid var(--green-mid);
  transform:rotate(45deg);
}
.ege-flow__num{
  display:block; font-family:var(--font-body); font-weight:700; font-size:.72rem;
  letter-spacing:.14em; color:var(--green-mid); margin-bottom:.45rem;
}
.ege-flow__name{
  display:block; font-family:var(--font-body); font-weight:var(--wt-sub);
  font-size:1.02rem; color:var(--forest); line-height:1.3; margin-bottom:.4rem;
}
.ege-flow__note{ display:block; font-size:.9rem; line-height:1.55; color:var(--muted); }
/* Initiatives nested inside a core program. Indented under a rule so the diagram shows at a
   glance which things are the three core programs and which sit inside one of them. */
.ege-flow__sub{
  list-style:none; margin:.75rem 0 0; padding:0 0 0 .85rem;
  border-left:2px solid rgba(9,72,56,.18); display:flex; flex-direction:column; gap:.55rem;
}
.ege-flow__subname{
  display:block; font-family:var(--font-body); font-weight:var(--wt-sub);
  font-size:.9rem; color:var(--forest); line-height:1.3;
}
.ege-flow__subnote{ display:block; font-size:.84rem; line-height:1.5; color:var(--muted); }
.ege-flow__loop{
  margin:2.4rem 0 0; padding:1.1rem 1.3rem;
  border:1px dashed rgba(9,72,56,.30); border-radius:var(--radius-card);
  font-size:.95rem; line-height:1.6; color:var(--forest); max-width:70ch;
}
.ege-flow__loop span{ margin-right:.5rem; font-size:1.15rem; color:var(--green-mid); }
@media (max-width:1000px){ .ege-flow{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){
  .ege-flow{ grid-template-columns:1fr; gap:1.5rem; }
  /* Arrows point down once the stages stack, not sideways into nothing. */
  .ege-flow__step + .ege-flow__step::before{ left:.15rem; top:-1.05rem; transform:rotate(135deg); }
}

/* ---------- flyer band, and the sub-brand mark in a hero ----------
   Added 2026-09-10 with EGE Out! Abroad. Her note: the trip information "takes up a lot of the
   page", so the flyer sits beside a short summary rather than above a wall of it, and the long
   detail stays as text further down where someone who wants it can read it. */
.ege-flyer{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:2.6rem; align-items:center;
}
.ege-flyer__media{ margin:0; }
.ege-flyer__media a{ display:block; border-radius:var(--radius-card); overflow:hidden; }
.ege-flyer__media img{
  width:100%; height:auto; display:block; border-radius:var(--radius-card);
  box-shadow:0 18px 44px rgba(9,72,56,.18);
}
/* The flyer is a poster: it must not grow to fill a wide column or it dwarfs the text. */
.ege-flyer__media{ max-width:26rem; }
.ege-flyer__body h2{ margin:0 0 .8rem; }
.ege-flyer__body p{ margin:0 0 1rem; max-width:46ch; }
.ege-flyer__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; margin-top:1.4rem; }
@media (max-width:860px){
  .ege-flyer{ grid-template-columns:1fr; gap:1.8rem; }
  .ege-flyer__media{ max-width:22rem; margin-inline:auto; }
}

/* A programme mark above the page title. Capped hard, because the supplied artwork is
   1200px wide and would otherwise read as a second hero image. */
.ege-hero__logo{ margin:0 0 1.1rem; }
.ege-hero__logo img{ width:auto; max-width:min(22rem, 72vw); height:auto; display:block; }
@media (max-width:640px){ .ege-hero__logo img{ max-width:min(16rem, 76vw); } }