/* get-involved.html: a hero with an index of the six ways in, the bug report laid out in full,
   then one card per way, each with a single action. --c on each section or card is its stop on
   the logo gradient. */

/* hero */
.gihero{position:relative;padding-block:calc(var(--barh) + var(--navh) + 56px) 64px;overflow:hidden}
.gihero canvas{position:absolute;inset:0;width:100%;height:100%}
.gihero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.gihero h1{font-size:clamp(44px,5.6vw,90px);line-height:.94;letter-spacing:-.05em;max-width:760px}
.gihero h1 i{font-style:normal;background:linear-gradient(90deg,#30B9FE,#5B6DFF 35%,#8151FE 62%,#DD3BFC);-webkit-background-clip:text;background-clip:text;color:transparent}
.gihero .sub{margin-top:24px;font-size:clamp(18px,1.45vw,21px);line-height:1.45;max-width:540px}
.giidx{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:8px;background:rgba(11,15,19,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden;min-width:0}
.giidx .hd{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:14px 20px 12px;border-bottom:1px solid var(--line-2)}
.giidx a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;padding:15px 20px;border-top:1px solid var(--line);transition:background .2s}
.giidx .hd + a{border-top:0}
.giidx a:hover{background:rgba(255,255,255,.035)}
.giidx .n{font-family:var(--mono);font-size:12px;color:var(--c)}
.giidx b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.02em;line-height:1.15}
.giidx small{display:block;color:var(--mute);font-size:14px;margin-top:3px}
.giidx .ar{color:var(--dim);font-family:var(--mono);transition:color .2s,transform .2s}
.giidx a:hover .ar{color:var(--c);transform:translateX(3px)}

/* 01 report a bug */
#bug,.gic{scroll-margin-top:calc(var(--barh) + var(--navh) + 24px)}
.gibug{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:start}
.gihd{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.gihd code{font-family:var(--mono);text-transform:none;letter-spacing:0;color:var(--fg);font-size:12.5px}
.gigather{display:grid;border-top:1px solid var(--line-2)}
.gigather > div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.gigather b{font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--c);padding-top:4px}
.gigather p{color:var(--mute);font-size:16px;line-height:1.55}
.gigather code,.gic code{font-family:var(--mono);font-size:.88em;color:var(--fg);background:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:1px 5px}
.giright{display:flex;flex-direction:column;gap:16px;min-width:0}
.gisend{border:1px solid var(--line-2);border-radius:8px;background:var(--ink-2);padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:18px}
.gisend h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;line-height:1.05}
.giact,.gic .go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.gilink{color:var(--mute);font-size:15px;border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:color .2s,border-color .2s}
.gilink:hover{color:var(--fg);border-color:var(--fg)}

/* the cards */
.gigrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gic{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--ink-2);overflow:hidden;min-width:0}
.gic::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--c);z-index:2}
.gic .body{display:flex;flex-direction:column;gap:16px;padding:clamp(22px,2.4vw,34px);flex:1;min-width:0}
.gic .lab{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.gic .lab i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.gic h3{font-size:clamp(28px,2.7vw,40px);letter-spacing:-.04em;line-height:1.02}
.gic p{color:var(--mute);font-size:16px;line-height:1.55;max-width:620px}
.gic p.lead{color:var(--fg);font-size:clamp(16.5px,1.2vw,18px);line-height:1.5}
.gitip{border-left:2px solid var(--c);padding:4px 0 4px 16px;color:var(--mute);font-size:15px;line-height:1.55;display:flex;flex-direction:column;gap:10px}
.gitip b{color:var(--fg);font-weight:500}
.gitip p{font-size:15px;color:var(--mute)}
p.gitip{display:block}
.gic .go{margin-top:auto;padding-top:6px}

/* pictures */
.gimos{position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:2px;aspect-ratio:16/9;background:var(--ink);border-bottom:1px solid var(--line)}
.gimos figure{margin:0;position:relative;overflow:hidden;min-height:0}
.gimos figure.big{grid-row:1/3}
.gimos img{width:100%;height:100%;object-fit:cover;display:block}
.gimos .tag,.gipic figcaption{position:absolute;left:10px;top:12px;z-index:2;font-size:10.5px;background:rgba(6,8,11,.84);color:var(--fg);padding:3px 7px;border-radius:2px}
.gipic{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:#f6f6f4;border-bottom:1px solid var(--line)}
.gipic img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}

/* 04 build on it: text beside the commands */
.gic.wide{grid-column:1/-1}
.gic.wide .body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:26px clamp(24px,4vw,60px);align-items:start}
.gic.wide .gibuilds,.gic.wide .go{grid-column:1/-1}
.gic.wide .col{display:flex;flex-direction:column;gap:16px;min-width:0}
.gibuilds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.gibuilds > div{display:flex;flex-direction:column;gap:10px;padding:18px 0 4px;border-top:1px solid var(--line-2);min-width:0}
.gibuilds .pills{margin-top:auto;padding-top:4px}
.gibuilds b{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em}
.gibuilds p{font-size:15.5px}

/* 05 teach: the first lesson path */
.gipath{border:1px solid var(--line);border-radius:6px;background:var(--ink);padding:16px 18px}
.gipath > span{display:block;font-size:11.5px;letter-spacing:.04em;color:var(--dim);margin-bottom:10px}
.gipath ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 22px;counter-reset:gl}
.gipath li{counter-increment:gl;display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--fg);min-width:0}
.gipath li::before{content:counter(gl);font-family:var(--mono);font-size:11px;color:var(--c);width:14px;flex:none}
.gipath li span{flex:1;min-width:0}
.gipath li small{font-family:var(--mono);font-size:11px;color:var(--dim);flex:none}

@media (max-width:1080px){
  .gihero .wrap,.gibug,.gic.wide .body{grid-template-columns:1fr}
  .giidx{max-width:620px}
}
@media (max-width:760px){
  .gigrid,.gibuilds{grid-template-columns:1fr}
  .gibuilds > div{padding-bottom:14px}
  .gigather > div{grid-template-columns:1fr;gap:6px}
  .gigather b{padding-top:0}
  .gipath ol{grid-template-columns:1fr}
  .giidx a{padding:13px 16px;gap:12px}
  .giidx .hd{padding-inline:16px}
}