/* Get Involved (/get-involved/). Loads after /css/bevp-shell.css and /css/readability.css and never restyles the shell.
   Breakpoints match the shell: 1100 selector rows, 900 stacked sections, 700 phone; short landscape (700 to 899 wide,
   500 tall or less) keeps the desktop splits. Phones follow title, photograph, information, action.

   Template sources (design reference only; no markup, plugins or images copied):
   1. Hero, ink. A full-bleed BEVP photograph with an oversized two-line headline over it and a slow zoom-in on load.
      Adapted from asata/asata/index4.html L170-199 (.feat-wrap/.feat-img/.feat-cap: assets/css/style.css L2565-2647,
      the scale(1.3) to scale(1) reveal; giant .feat-cap h2) with the photo-under-headline order of asata/asata/about2.html
      L184-206 (.about-wrap7: style.css L3479-3509) on phones.
   2. Find Your Path, paper. Five audience tabs above one panel that swaps photograph, description, resources and actions;
      the selected tab fills ink and its arrow slides in.
      Adapted from asata/asata/index.html L574-757 (.pric-tabs: style.css L1592-1666, the active arrow glyph; the horizontal
      tab row of assets/css/responsive.css L166-193) and saasten/saasten/index-4.html L543-747 (.sass-advancement pill bar
      over one large panel: style.css L2386-2459).
   3. Events, ink. Editorial rows, not cards: Evolutions leads with a large photograph and a ghost word behind it, the
      other two alternate sides at a smaller scale.
      Adapted from asata/asata/index4.html L257-306 (.port-box4 rows with ghost word: style.css L2759-2802; responsive.css
      L347-351, L425-429).
   4. The Legacy Jump, bone. Poster beside an oversized title and purchase action, with the two coming publications below.
      Adapted from asata/asata/index7.html L237-261 (.about-wrap4 style2 caption split: style.css L2867-2905).
   5. Closing, ink and red. Two tall halves, statement and action at the foot, the ink half over a darkened photograph.
      Adapted from asata/asata/price-table.html L248-305 (.price-body4 gradient panels: style.css L4409-4440). */

.gi{--gi-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--u-paper)}
.gi section{position:relative}
.gi p{text-wrap:pretty}
:where(.gi) figure{margin:0}
.gi .u-btn{margin:0}
.gi .rd-label{font-size:13px}

/* ============================================================
   1. HERO
   ============================================================ */
.gi-hero{background:var(--u-ink);color:var(--u-bone)}
.gi-hero__stage{
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(600px,calc(100svh - var(--u-header-h)),920px);
}
.gi-hero__photo{position:absolute;inset:0;z-index:-2}
.gi-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block}
.gi-hero__stage::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,11,.88) 0%,rgba(14,13,11,.55) 26%,rgba(14,13,11,0) 44%,rgba(14,13,11,0) 54%,rgba(14,13,11,.86) 80%,rgba(14,13,11,.96) 100%);
}
.gi-hero__top{padding-top:clamp(28px,4.5vw,64px)}
.gi-hero__kicker{color:var(--u-bone)}
.gi-hero__title{
  margin:12px 0 0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(52px,min(10.4vw,17svh),168px);line-height:.88;color:var(--u-bone);
}
.gi-hero__title span{display:block;color:var(--u-red)}
.gi-hero__foot{padding-bottom:clamp(32px,4.5vw,64px)}
.gi-hero__lead{margin:0;max-width:none;font-size:var(--rd-lead);line-height:1.55;color:var(--u-bone)}
.gi-hero__go{margin-top:var(--u-s5)}
@media (prefers-reduced-motion:no-preference){
  .gi-hero__photo img{animation:gi-zoom 2.4s cubic-bezier(.7,0,.3,1) both}
  @keyframes gi-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
}

/* ============================================================
   2. FIND YOUR PATH
   ============================================================ */
.gi-path{background:var(--u-paper);padding-block:var(--rd-section)}
.gi-path__intro .rd-h2,.gi-path__intro .rd-lead,
.gi-events__intro .rd-h2,.gi-events__intro .rd-lead{max-width:none;text-wrap:wrap}
.gi-path__intro .rd-lead,.gi-events__intro .rd-lead{margin:var(--u-s4) 0 0}

.gi-path__tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:clamp(32px,4vw,56px)}
.gi-tab{
  all:unset;box-sizing:border-box;position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  min-height:96px;padding:18px 18px 18px 20px;border-radius:18px;cursor:pointer;
  background:var(--u-bone);color:var(--u-ink);
  font-family:var(--u-ff-label);font-size:15px;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;text-wrap:balance;
  transition:background .2s ease,color .2s ease;
}
.gi-tab svg{flex:none;width:20px;height:20px;opacity:0;transform:translateX(-10px);transition:opacity .2s ease,transform .2s ease}
@media (hover:hover){.gi-tab:hover{background:#ded3bb}.gi-tab:hover svg{opacity:.5;transform:none}}
.gi-tab.is-sel{background:var(--u-ink);color:var(--u-bone)}
.gi-tab.is-sel svg{opacity:1;transform:none;color:var(--u-red)}
.gi-tab:focus-visible{outline:var(--u-focus);outline-offset:3px}

.gi-path__panels{margin-top:clamp(28px,3.4vw,48px)}
.gi-panel{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--rd-gap);
  grid-template-areas:"photo photo photo photo photo photo title title title title title title"
                      "photo photo photo photo photo photo body body body body body body";
  grid-template-rows:auto 1fr;
}
.gi-panel[hidden]{display:none}
.gi-panel:focus{outline:none}
.gi-panel:focus-visible{outline:var(--u-focus);outline-offset:6px}
.gi-panel__title{
  grid-area:title;margin:0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,3.6vw,56px);line-height:.98;text-wrap:balance;
}
.gi-panel__photo{grid-area:photo;position:relative;min-height:520px;border-radius:24px;overflow:hidden;background:var(--u-ink)}
.gi-panel__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gi-panel__photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:48px 20px 16px;color:var(--u-bone);font-size:15px;line-height:1.45;
  background:linear-gradient(180deg,rgba(14,13,11,0),rgba(14,13,11,.82));
}
.gi-panel__body{grid-area:body;padding-top:var(--u-s4)}
.gi-panel__body > p{margin:var(--u-s4) 0 0}
.gi-panel__deck{margin:0 !important;font-family:var(--u-ff-edit);font-style:italic;font-size:clamp(21px,1.8vw,26px);line-height:1.32}
.gi-recruit{margin-top:var(--u-s5)}
.gi-recruit .rd-label{color:var(--u-red)}
.gi-recruit__status{margin:6px 0 0;font-weight:600}
.gi-recruit__note{margin:2px 0 0;color:var(--u-text-soft)}
.gi-res{list-style:none;margin:var(--u-s5) 0 0;padding:0}
.gi-res a{
  display:inline-flex;align-items:center;gap:10px;min-height:var(--u-tap);color:inherit;text-decoration:none;
  font-weight:600;
}
.gi-res a span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.gi-res a svg{width:16px;height:16px;flex:none;color:var(--u-red);transition:transform .2s ease}
@media (hover:hover){.gi-res a:hover svg{transform:translateX(4px)}}
.gi-panel__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--u-s5)}

/* No script: every pathway is shown in order and the tab row is not needed */
html:not(.js) .gi-path__tabs{display:none}
html:not(.js) .gi-panel[hidden]{display:grid !important}
html:not(.js) .gi-panel + .gi-panel{margin-top:var(--rd-section)}

/* ============================================================
   3. EVENTS
   ============================================================ */
.gi-events{background:var(--u-ink);color:var(--u-bone);padding-block:var(--rd-section);overflow:hidden}
.gi-events .rd-lead{color:var(--u-bone)}
.gi-ev{
  position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--rd-gap);
  align-content:center;margin-top:clamp(48px,6vw,96px);grid-template-rows:1fr auto 1fr;
}
.gi-ev__photo{position:relative;border-radius:24px;overflow:hidden;background:#1d1b17}
.gi-ev__photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
@media (hover:hover){.gi-ev:hover .gi-ev__photo img{transform:scale(1.04)}}
.gi-ev__head,.gi-ev__desc,.gi-ev__actions{position:relative;z-index:1}
.gi-ev__meta{color:#d9cdb4}
.gi-ev__title{margin:10px 0 0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;line-height:.96;text-wrap:balance}
.gi-ev__desc{margin:var(--u-s4) 0 0}
.gi-ev__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--u-s5)}
.gi-ev__ghost{
  position:absolute;z-index:0;right:-.04em;top:-.12em;pointer-events:none;user-select:none;
  font-family:var(--u-ff-title);text-transform:uppercase;line-height:1;white-space:nowrap;
  font-size:clamp(110px,15vw,240px);color:rgba(236,227,208,.07);
}
/* Evolutions leads: large photograph left, text right */
.gi-ev--lead .gi-ev__photo{grid-column:1 / 8;grid-row:1 / 4;aspect-ratio:4 / 3}
.gi-ev--lead .gi-ev__head,.gi-ev--lead .gi-ev__desc,.gi-ev--lead .gi-ev__actions{grid-column:8 / -1}
.gi-ev--lead .gi-ev__head{align-self:end}
.gi-ev--lead .gi-ev__actions{align-self:start}
.gi-ev--lead .gi-ev__title{font-size:clamp(48px,5.6vw,92px)}
/* Valkyrie: text left, photograph right */
.gi-ev--valk .gi-ev__photo{grid-column:7 / -1;grid-row:1 / 4;aspect-ratio:3 / 2}
.gi-ev--valk .gi-ev__head,.gi-ev--valk .gi-ev__desc,.gi-ev--valk .gi-ev__actions{grid-column:2 / 7}
/* Armed Forces Shootout: photograph left, text right */
.gi-ev--afs .gi-ev__photo{grid-column:1 / 6;grid-row:1 / 4;aspect-ratio:3 / 2}
.gi-ev--afs .gi-ev__head,.gi-ev--afs .gi-ev__desc,.gi-ev--afs .gi-ev__actions{grid-column:6 / 12}
.gi-ev--valk .gi-ev__head,.gi-ev--afs .gi-ev__head{align-self:end}
.gi-ev--valk .gi-ev__actions,.gi-ev--afs .gi-ev__actions{align-self:start}
.gi-ev--valk .gi-ev__title,.gi-ev--afs .gi-ev__title{font-size:clamp(36px,3.8vw,60px)}

/* ============================================================
   4. THE LEGACY JUMP AND COMING PUBLICATIONS
   ============================================================ */
.gi-film{background:var(--u-bone);padding-block:var(--rd-section)}
.gi-film__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--rd-gap);
  grid-template-areas:"poster poster poster poster poster head head head head head head head"
                      "poster poster poster poster poster text text text text text text text";
  grid-template-rows:auto 1fr;
}
.gi-film__head{grid-area:head;align-self:end}
.gi-film__poster{grid-area:poster;align-self:start}
.gi-film__poster img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 30px 60px -24px rgba(14,13,11,.55)}
.gi-film__text{grid-area:text}
.gi-film__head .rd-label{color:var(--u-red)}
.gi-film__title{
  margin:12px 0 0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;
  font-size:clamp(56px,8.4vw,136px);line-height:.88;
}
.gi-film__deck{margin:var(--u-s5) 0 0;font-family:var(--u-ff-edit);font-style:italic;font-size:var(--rd-deck);line-height:1.3;max-width:none}
.gi-film__text > p:not([class]){margin:var(--u-s4) 0 0;max-width:none}
.gi-film__when{margin:var(--u-s5) 0 0}
.gi-film__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--u-s4)}
.gi-film__actions .u-btn--red{min-height:60px;padding-inline:32px;font-size:15px}

.gi-pubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--rd-gap);row-gap:var(--u-s6);margin-top:clamp(64px,7vw,112px)}
.gi-pubs__head{grid-column:1 / -1;margin:0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:var(--rd-h2-md);line-height:1}
.gi-pub{display:grid;grid-template-columns:clamp(110px,11vw,160px) minmax(0,1fr);column-gap:clamp(20px,2.4vw,32px);align-items:start}
.gi-pub__cover{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 18px 36px -18px rgba(14,13,11,.5)}
.gi-pub__text .rd-label{color:var(--u-text-soft)}
.gi-pub__title{margin:8px 0 0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:var(--rd-h3);line-height:1}
.gi-pub__text > p:not([class]){margin:var(--u-s3) 0 0}
.gi-pub__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:var(--u-s4)}

/* ============================================================
   5. CLOSING
   ============================================================ */
.gi-close{display:grid;grid-template-columns:1fr 1fr;color:var(--u-bone)}
.gi-close__half{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-start;min-height:clamp(440px,56svh,600px)}
.gi-close__half--ink{background:var(--u-ink)}
.gi-close__half--red{background:var(--u-red)}
.gi-close__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.gi-close__half--ink::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,13,11,.3) 0%,rgba(14,13,11,.82) 42%,rgba(14,13,11,.96) 100%);
}
.gi-close__inner{width:100%;max-width:calc(var(--u-wrap) / 2);padding:var(--rd-section) var(--u-pad-x)}
.gi-close__half--ink .gi-close__inner{margin-left:auto}
.gi-close .rd-kicker{color:var(--u-bone)}
.gi-close__title{margin:10px 0 0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:clamp(56px,6.6vw,112px);line-height:.88}
/* Clear space on both sides of the seam between the halves */
.gi-close__half--ink .gi-close__inner{padding-right:calc(var(--u-pad-x) + var(--rd-gap))}
.gi-close__half--red .gi-close__inner{padding-left:calc(var(--u-pad-x) + var(--rd-gap))}
.gi-close__inner > p:not([class]){margin:var(--u-s5) 0 0;max-width:none}
.gi-close__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--u-s5)}
.gi-close__half--red .u-btn--bone{color:var(--u-ink)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1099px){
  .gi-path__tabs{grid-template-columns:repeat(6,minmax(0,1fr))}
  .gi-tab{grid-column:span 2;min-height:76px}
  .gi-tab:nth-child(n+4){grid-column:span 3}
}

@media (max-width:899px){
  .gi-panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "photo" "body";grid-template-rows:none}
  .gi-panel__photo{min-height:0;aspect-ratio:3 / 2;margin-top:var(--u-s4)}
  .gi-ev,.gi-film__grid{grid-template-columns:minmax(0,1fr)}
  .gi-ev{grid-template-rows:none}
  .gi-ev .gi-ev__photo,.gi-ev .gi-ev__head,.gi-ev .gi-ev__desc,.gi-ev .gi-ev__actions{grid-column:1 / -1;grid-row:auto}
  .gi-ev .gi-ev__photo{order:2;margin-top:var(--u-s4);aspect-ratio:3 / 2}
  .gi-ev .gi-ev__head{order:1}
  .gi-ev .gi-ev__desc{order:3}
  .gi-ev .gi-ev__actions{order:4}
  .gi-ev__ghost{top:-.3em}
  .gi-film__grid{grid-template-areas:"head" "poster" "text";grid-template-rows:none}
  .gi-film__poster{width:min(64%,360px);margin-top:var(--u-s5)}
  .gi-film__text{margin-top:var(--u-s5)}
  .gi-pubs{grid-template-columns:minmax(0,1fr)}
  .gi-close{grid-template-columns:minmax(0,1fr)}
  .gi-close__half{min-height:0}
  .gi-close__inner,.gi-close__half--ink .gi-close__inner,.gi-close__half--red .gi-close__inner{max-width:none;margin:0 !important;padding:clamp(56px,10vw,96px) var(--u-pad-x)}
  .gi-close__title{font-size:clamp(56px,13vw,112px)}
  .gi-close__half--ink{min-height:clamp(420px,60vw,560px)}
}

/* Short landscape phones (844x390 and similar): keep the desktop splits, one-line headline */
@media (max-width:899px) and (min-width:700px) and (max-height:500px){
  .gi-hero__stage{min-height:calc(100svh - var(--u-header-h))}
  .gi-hero__stage::before{background:linear-gradient(180deg,rgba(14,13,11,.8),rgba(14,13,11,.7) 50%,rgba(14,13,11,.88))}
  .gi-hero__title{font-size:clamp(44px,15svh,72px)}
  .gi-hero__title span{display:inline}
  .gi-hero__top{padding-top:16px}
  .gi-hero__foot{padding-bottom:20px}
  .gi-hero__lead{font-size:17px;line-height:1.5}
  .gi-hero__go{margin-top:12px}
  .gi-panel{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:"photo photo photo photo photo title title title title title title title" "photo photo photo photo photo body body body body body body body";grid-template-rows:auto 1fr}
  .gi-panel__photo{margin-top:0;aspect-ratio:auto;min-height:320px}
}

@media (max-width:699px){
  /* Phones: headline, photograph, lead, action */
  .gi-hero__stage{display:block;min-height:0}
  .gi-hero__stage::before{display:none}
  .gi-hero__top{padding-top:22px}
  .gi-hero__title{font-size:clamp(44px,14.2vw,64px)}
  .gi-hero__photo{position:relative;inset:auto;z-index:0;margin-top:20px;aspect-ratio:2 / 1;overflow:hidden}
  .gi-hero__photo img{object-position:50% 55%}
  .gi-hero__foot{display:flex;flex-direction:column;padding-top:18px;padding-bottom:40px}
  .gi-hero__lead{font-size:16px;line-height:1.55}
  .gi-hero__go{margin-top:18px}
  .gi-hero__go .u-btn{width:100%}

  .gi-path__tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .gi-tab,.gi-tab:nth-child(n+4){grid-column:auto;min-height:64px;padding:12px 12px 12px 14px;font-size:15px;letter-spacing:.02em;align-items:center;text-wrap:pretty}
  .gi-tab:last-child{grid-column:1 / -1}
  .gi-tab svg{width:16px;height:16px}
  /* The paths as rows, each opening its photograph and text directly under it (see 1 in gi.js) */
  html.js .gi-path__tabs{grid-template-columns:minmax(0,1fr)}
  html.js .gi-path__tabs .gi-tab{grid-column:1 / -1;min-height:60px}
  html.js .gi-path__tabs .gi-panel{grid-column:1 / -1;padding:var(--u-s2) 0 var(--u-s6)}
  html.js .gi-path__tabs .gi-panel__title{display:none}
  html.js .gi-path__tabs .gi-panel__photo{margin-top:0}
  html.js .gi-path__panels{margin-top:0}

  .gi-panel__actions .u-btn,.gi-ev__actions .u-btn,.gi-film__actions .u-btn,.gi-close__actions .u-btn{flex:1 1 100%}
  .gi-ev__ghost{display:none}
  .gi-film__poster{width:min(72%,300px)}
  .gi-film__actions .u-btn--red{font-size:14px;padding-inline:20px}
  .gi-pub{grid-template-columns:96px minmax(0,1fr)}
}
/* Short phones (320x568): the action comes before the lead so it stays in the first screen */
@media (max-width:699px) and (max-height:740px){
  .gi-hero__photo{aspect-ratio:3 / 1;margin-top:14px}
  .gi-hero__go{order:-1;margin:0 0 16px}
  .gi-hero__foot{padding-top:16px}
}

/* Donate/988 rail (1024 and below): the hero ends above it so Find Your Path stays clear of the rail */
@media (max-width:1024px) and (min-width:700px){
  .gi-hero__stage{min-height:clamp(520px,calc(100svh - var(--u-header-h) - var(--u-dock-clear)),920px)}
}
@media (max-width:899px) and (min-width:700px) and (max-height:500px){
  .gi-hero__stage{min-height:calc(100svh - var(--u-header-h) - var(--u-dock-clear))}
}
/* Narrow phones (320): one tab per row so the longest labels fit */
@media (max-width:379px){
  .gi-path__tabs{grid-template-columns:minmax(0,1fr)}
  .gi-tab,.gi-tab:nth-child(n+4),.gi-tab:last-child{grid-column:auto;min-height:52px}
}