.btn{
  display:inline-flex; align-items:center; gap:var(--s-2); text-decoration:none;
  font:600 var(--fs-400)/1 var(--f-chrome); text-transform:uppercase; letter-spacing:.05em;
  color:var(--c-bone); background:var(--c-plate); border:1px solid var(--c-iron);
  border-radius:2px; padding:var(--s-3) var(--s-5); cursor:pointer;
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
.btn:hover{ border-color:var(--c-glow); background:var(--c-plate-hover); }
.btn:focus-visible{ outline:2px solid var(--c-glow); outline-offset:2px;
                    box-shadow:0 0 6px rgba(52,224,206,.30); }
.btn:active{ transform:translateY(1px); box-shadow:var(--bevel-recessed); }
.btn:disabled{ color:var(--c-dust); background:var(--c-forge); border-color:var(--c-iron-dim); cursor:not-allowed; }
.btn--ghost{ background:transparent; }
.btn.is-done{ color:var(--c-glow); border-color:var(--c-glow); }

.spine{ display:grid; gap:var(--s-4); }
.spine__row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s-3); }
.spine__label{
  font:600 var(--fs-200)/1 var(--f-chrome); text-transform:uppercase; letter-spacing:.15em;
  color:var(--c-brass-hi); min-width:3.4em;
}
.spine__segs{ display:flex; gap:var(--s-1); }
.spine__seg{
  height:9px; flex:1 1 0; background:var(--d-track);
  border:1px solid rgba(0,0,0,.5); box-shadow:var(--bevel-recessed);
}
.spine__seg.is-on{ background:var(--seg, var(--d-3)); box-shadow:none; }
.spine__val{
  font-family:var(--f-mono); font-weight:600; font-variant-numeric:tabular-nums;
  font-size:var(--fs-300); color:var(--c-ash); letter-spacing:-.01em;
}
@media (prefers-reduced-motion: no-preference){
  .is-orchestrated .spine__seg.is-on{
    animation: seg-fill .18s var(--ease) both;
    animation-delay: calc(var(--i,0) * 40ms);
  }
  @keyframes seg-fill{ from{ transform:scaleX(0); transform-origin:left } to{ transform:scaleX(1) } }
}

.overall{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:var(--s-5);
  margin-block:var(--s-6);
}
.overall__num{
  font-family:var(--f-mono); font-weight:600; font-size:var(--fs-1100);
  line-height:1; letter-spacing:-.02em; color:var(--c-glow-hot);
  font-variant-numeric:tabular-nums; text-align:center;
}
.overall__den{ font-size:var(--fs-500); color:var(--c-dust); }
.overall__word{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  font-size:var(--fs-800); letter-spacing:.09em; line-height:1.06; color:var(--c-bone);
}
.overall__cap{ margin-top:var(--s-2); }

.runes{ display:grid; gap:var(--s-4); }
.runes__head{ display:flex; align-items:center; gap:var(--s-4); }
.runepage{
  display:block; position:relative; border:1px solid var(--c-iron); border-radius:2px;
  overflow:hidden; background:var(--c-forge);
  box-shadow: var(--bevel-raised), 0 0 0 rgba(52,224,206,0);
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.runepage img{ display:block; width:100%; height:auto; }
.runepage:hover, .runepage:focus-visible{
  border-color:var(--c-glow);
  box-shadow: var(--bevel-raised), 0 0 22px rgba(52,224,206,.28);
}
.runes__keyname{
  font:700 var(--fs-500)/1.15 var(--f-chrome); text-transform:uppercase; letter-spacing:.12em;
  color:var(--c-bone);
}
.runes__tree{ padding-left:var(--s-4); border-left:2px solid var(--c-glow-deep); }
.runes__tree--primary{ border-left-color:var(--c-glow); }
.runes__tree--shards{ border-left-color:var(--c-brass); }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); list-style:none; margin:0; padding:0; }
.chip{
  font:400 var(--fs-300)/1.4 var(--f-mono); color:var(--c-bone);
  background:var(--c-forge); border:1px solid var(--c-iron); border-radius:2px;
  padding:1px var(--s-2);
}
.chip--lead{ color:var(--c-glow); border-color:var(--c-glow-deep); }
.runes__raw{ word-break:break-word; }

.builds{ display:grid; gap:var(--s-6); }
@media (min-width:900px){ .builds--dual{ grid-template-columns:1fr 1fr; } }
.build__cond{
  display:inline-block; margin-bottom:var(--s-3);
  font:600 var(--fs-200)/1.3 var(--f-chrome); text-transform:uppercase; letter-spacing:.15em;
  color:var(--c-brass-hi); background:var(--c-forge);
  border:1px solid var(--c-iron); border-radius:2px; padding:var(--s-2) var(--s-3);
}
.build__strip{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--s-3); margin-bottom:var(--s-5); }
.build__slot{ position:relative; width:42px; }
.build__icon{ width:42px; height:42px; border-radius:3px; border:1px solid var(--c-iron); }
.build__step{
  display:block; text-align:center; margin-top:var(--s-1);
  font-family:var(--f-mono); font-weight:600; font-size:var(--fs-100);
  color:var(--c-dust); font-variant-numeric:tabular-nums;
}
.build__slot--core::after{
  content:""; position:absolute; top:0; bottom:14px; right:calc(var(--s-3) / -2 - 1px);
  width:1px; background:var(--c-iron);
}
.build__notes{ list-style:none; margin:0; padding:0; counter-reset:bstep; }
.build__notes li{
  position:relative; padding-left:var(--s-6); margin-bottom:var(--s-4);
  font-size:var(--fs-400); line-height:1.6;
}
.build__notes li::before{
  counter-increment:bstep; content:counter(bstep,decimal-leading-zero);
  position:absolute; left:0; top:.15em;
  font-family:var(--f-mono); font-weight:600; font-size:var(--fs-100);
  color:var(--c-glow-deep); font-variant-numeric:tabular-nums;
}
.build__item{ color:var(--c-bone); font-weight:600; }
.build__note{ color:var(--c-ash); display:block; }
.build__pre{ margin-bottom:var(--s-4); }

.summs{ display:flex; gap:var(--s-2); }
.summs img{ width:30px; height:30px; border-radius:3px; border:1px solid var(--c-iron); }

.plate__body{ padding:var(--s-5); }
.plate__label{
  display:block; margin-bottom:var(--s-1);
  font:600 var(--fs-200)/1 var(--f-chrome); text-transform:uppercase; letter-spacing:.15em;
  color:var(--c-brass-hi);
}

.writeup{ max-width:var(--w-prose); }
.sect{
  margin-top:var(--s-7); padding:var(--s-5) var(--s-5) var(--s-5) var(--s-6);

  scroll-margin-top:calc(var(--s-8) + var(--s-5));
}
.sect:first-of-type{ margin-top:var(--s-5); }
.sect__head{ position:relative; margin:0 0 var(--s-3); }
.sect__n{
  font-family:var(--f-mono); font-weight:400; font-size:var(--fs-100);
  color:var(--c-dust); letter-spacing:.06em; display:block; margin-bottom:var(--s-1);
}
.sect__h{
  font:700 var(--fs-500)/1.2 var(--f-chrome); text-transform:uppercase; letter-spacing:.12em;
  color:var(--c-bone); margin:0; display:inline;
}
.sect__anchor{
  margin-left:var(--s-2); color:var(--c-glow-deep); text-decoration:none;
  opacity:0; transition:opacity var(--t-base) var(--ease);
  font-family:var(--f-mono); font-size:var(--fs-300);
}
.sect__head:hover .sect__anchor,.sect__head:focus-within .sect__anchor{ opacity:1; }
.sect__body p{
  position:relative; margin:0 0 var(--s-5); font-size:var(--fs-600); line-height:1.66;
}
.sect__body p:last-child{ margin-bottom:0; }
.sect__body p::before{
  content:""; position:absolute; left:calc(var(--s-5) * -1); top:.72em;
  width:9px; height:1px; background:var(--c-glow-deep);
}

.sect--early{ background:var(--c-slag); }
.sect--trade{
  position:relative;
  background:var(--c-forge);
  border-left:2px solid var(--c-glow);
  box-shadow:0 0 6px rgba(52,224,206,.30);
}
.sect--trade::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:180px;
  pointer-events:none; z-index:0;
  background:linear-gradient(90deg, rgba(52,224,206,.07), transparent);
}
.sect--trade > *{ position:relative; z-index:1; }
.sect--watch{ background:var(--c-forge-ember); border-left:2px solid var(--c-ember); }
.sect--watch .sect__n{ color:var(--c-ember); }
.sect--tips{
  background-color:var(--c-plate); border:1px solid var(--c-iron);
  background-image:var(--rivet),var(--rivet),var(--milled);
  background-position:7px 7px, calc(100% - 7px) calc(100% - 7px), 0 0;
  background-repeat:no-repeat,no-repeat,repeat;
}
.writeup__foot{ margin-top:var(--s-7); display:flex; gap:var(--s-4); align-items:center; flex-wrap:wrap; }

.is-collapsed .sect__body{ display:none; }
.is-collapsed .sect{ padding-block:var(--s-3); }

.toc__list{ list-style:none; margin:0; padding:0; }
.toc__list a{
  display:block; padding:var(--s-2) var(--s-3);
  font:500 var(--fs-400)/1.3 var(--f-chrome); text-transform:uppercase; letter-spacing:.05em;
  color:var(--c-ash); text-decoration:none; border-left:2px solid transparent;
  transition:color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.toc__list a:hover{ color:var(--c-bone); }
.toc__list a.is-active{ color:var(--c-glow); border-left-color:var(--c-glow); }
@media (max-width:1100px){
  .toc__list{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
  .toc__list a{ border-left:0; border:1px solid var(--c-iron); border-radius:2px; }
  .toc__list a.is-active{ border-color:var(--c-glow); }
}

.search{ position:relative; }
.search__field{ position:relative; display:flex; align-items:center; }
.search__input{
  width:100%; font:400 var(--fs-600)/1.4 var(--f-body);
  color:var(--c-bone); background:var(--c-forge);
  border:1px solid var(--c-iron); border-radius:2px;
  padding:var(--s-4) var(--s-5); padding-right:var(--s-8);
  box-shadow:var(--bevel-recessed);
  transition:border-color var(--t-base) var(--ease);
}
.search__input::placeholder{ color:var(--c-dust); }
.search__input:focus{ outline:none; border-color:var(--c-glow); }
.search__input:focus-visible{ outline:2px solid var(--c-glow); outline-offset:2px; }
.search__hint{
  position:absolute; right:var(--s-4);
  font:400 var(--fs-100)/1 var(--f-mono); letter-spacing:.06em; color:var(--c-dust);
  border:1px solid var(--c-iron); border-radius:2px; padding:var(--s-2); pointer-events:none;
}
.search__pop{
  position:absolute; left:0; right:0; top:calc(100% + var(--s-2)); z-index:40;
  background:var(--c-forge); border:1px solid var(--c-iron);
  box-shadow:var(--bevel-raised); max-height:calc(44px * 8); overflow-y:auto;
}
.search__pop[hidden]{ display:none; }
.search__group{
  padding:var(--s-3) var(--s-4) var(--s-1);
  font:600 var(--fs-200)/1 var(--f-chrome); text-transform:uppercase; letter-spacing:.15em;
  color:var(--c-brass-hi);
}
.opt{
  display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:var(--s-3);
  min-height:44px; padding:var(--s-2) var(--s-4); cursor:pointer;
  border-left:1px solid transparent; text-decoration:none; color:var(--c-bone);
  transition:transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
             background-color var(--t-base) var(--ease);
}
.opt:hover,.opt.is-active{
  transform:translateX(3px); border-left:3px solid var(--c-glow); background:var(--c-plate);
}
.opt__img{ width:32px; height:32px; border-radius:3px; border:1px solid var(--c-iron); }
.opt__name{ font-size:var(--fs-400); }
.opt__name mark{ background:none; color:var(--c-glow-hot); font-weight:600; }
.opt__pill{ display:flex; align-items:baseline; gap:var(--s-2); }
.opt__val{
  font-family:var(--f-mono); font-weight:600; font-size:var(--fs-300);
  font-variant-numeric:tabular-nums; color:var(--pill,var(--c-ash));
}
.opt__word{
  font:600 var(--fs-200)/1 var(--f-chrome); text-transform:uppercase; letter-spacing:.12em;
  color:var(--c-ash);
}
.search__empty{ padding:var(--s-5); max-width:var(--w-narrow); }
.search__empty p{ margin:0 0 var(--s-3); font-size:var(--fs-400); }

.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:var(--s-3); list-style:none; margin:0; padding:0;
}
.card{
  display:grid; grid-template-columns:38px 1fr; align-items:center; gap:var(--s-3);
  padding:var(--s-3); text-decoration:none; color:var(--c-bone);
  background:var(--c-forge); border:1px solid var(--c-iron); border-radius:2px;
  border-left:2px solid var(--card,var(--c-iron));
  transition:transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.card:hover,.card:focus-visible{ transform:translateX(3px); background:var(--c-plate); }
.card__img{ width:38px; height:38px; border-radius:3px; }
.card__name{ font:500 var(--fs-400)/1.2 var(--f-chrome); text-transform:uppercase; letter-spacing:.04em; }
.card__val{
  font-family:var(--f-mono); font-weight:600; font-size:var(--fs-100);
  color:var(--card,var(--c-ash)); font-variant-numeric:tabular-nums;
}

.overlay{
  position:fixed; inset:0; z-index:9000; overflow-y:auto;

  background:
    radial-gradient(120% 60% at 50% 0%, rgba(52,224,206,.11), transparent 60%),
    radial-gradient(80% 50% at 88% 6%, rgba(15,107,98,.18), transparent 62%),
    var(--c-slag);
  animation:scrim var(--t-slow) var(--ease) both;
}
.overlay[hidden]{ display:none; }
@keyframes scrim{ from{ opacity:0 } to{ opacity:1 } }
.overlay__panel{ position:relative; padding-block:var(--s-6) var(--s-8); }
.overlay__close{ position:absolute; top:var(--s-5); right:var(--s-5); z-index:2; }
@media (prefers-reduced-motion: no-preference){
  .overlay__portrait{ animation:rise var(--t-slow) var(--ease) both; }
  @keyframes rise{ from{ transform:translateY(9px) } to{ transform:translateY(0) } }
}

.hero{
  position:relative; display:grid; grid-template-columns:auto 1fr;
  gap:var(--s-5); align-items:end; padding:var(--s-5) 0 var(--s-6);
}
.hero__wash{
  position:absolute; left:-6%; right:-6%; top:-40%; bottom:-30%; z-index:0;
  pointer-events:none; opacity:.30;
  background-position:12% 38%; background-size:cover; background-repeat:no-repeat;
  filter:blur(46px) saturate(1.25);
  -webkit-mask-image:linear-gradient(100deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
  mask-image:linear-gradient(100deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
}

.hero > :not(.hero__wash):not(.crown--ghost){ position:relative; z-index:1; }
.hero__portrait{
  width:132px; height:132px; border:1px solid var(--c-iron);
  box-shadow:0 0 34px rgba(52,224,206,.30), var(--bevel-raised);
}
@media (max-width:700px){ .hero__portrait{ width:96px; height:96px; } }
.hero__name{ font-size:var(--fs-1000); }
@media (max-width:700px){ .hero__name{ font-size:var(--fs-900); } }

.mini{
  position:sticky; top:0; z-index:30; height:var(--s-8);
  display:flex; align-items:center; gap:var(--s-4);
  background:rgba(18,20,16,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-iron);
  transform:translateY(-100%); opacity:0; pointer-events:none; visibility:hidden;
  transition:transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease),
             visibility var(--t-base) var(--ease);
}
.mini.is-on{ transform:translateY(0); opacity:1; pointer-events:auto; visibility:visible; }
.mini__img{ width:32px; height:32px; border-radius:3px; }
.mini__name{ font:600 var(--fs-400)/1 var(--f-chrome); text-transform:uppercase; letter-spacing:.05em; }
.mini__pill{ margin-left:auto; }

.relic{ margin:0 0 var(--s-6); max-width:var(--w-rail); }
.relic__stage{
  position:relative; min-height:120px; background:var(--c-forge);
  border:1px solid var(--c-iron);
  box-shadow: var(--bevel-raised), 0 0 24px rgba(52,224,206,.12);
}
.relic__stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 18px rgba(52,224,206,.14);
}
.relic__frame > *{ display:block; width:100%; }
.relic__cap{
  font:400 var(--fs-100)/1.5 var(--f-mono); letter-spacing:.06em;
  color:var(--c-dust); margin-top:var(--s-2);
  padding-top:var(--s-2); border-top:1px solid var(--c-iron);
}

.tbl{ width:100%; border-collapse:collapse; font-size:var(--fs-400); }
.tbl caption{
  text-align:left; padding-bottom:var(--s-3);
  font:600 var(--fs-200)/1 var(--f-chrome); text-transform:uppercase; letter-spacing:.15em;
  color:var(--c-brass-hi);
}
.tbl th{
  text-align:left; padding:var(--s-3) var(--s-4);
  font:600 var(--fs-200)/1 var(--f-chrome); text-transform:uppercase; letter-spacing:.15em;
  color:var(--c-brass-hi); border-bottom:1px solid var(--c-iron); vertical-align:bottom;
}
.tbl td{
  padding:var(--s-4); border-bottom:1px solid var(--c-iron);
  vertical-align:top; color:var(--c-ash); line-height:1.55;
}
.tbl tbody tr:nth-child(even) td{ background:var(--c-forge); }
.tbl__icon{ width:42px; height:42px; border-radius:3px; border:1px solid var(--c-iron); margin-bottom:var(--s-2); }
.tbl__row-h{ color:var(--c-bone); font-weight:600; }
.tbl-scroll{ overflow-x:auto; }
.tbl-scroll:focus-visible{ outline:2px solid var(--c-glow); }

.deflist{ margin:0; }
.deflist > div{
  display:grid; grid-template-columns:var(--w-toc) minmax(0,1fr);
  gap:var(--s-5); padding-block:var(--s-5); border-bottom:1px solid var(--c-iron);
}
.deflist dt{ font:700 var(--fs-500)/1.25 var(--f-chrome); text-transform:uppercase;
  letter-spacing:.09em; color:var(--c-bone); }
.deflist dd{ margin:0; color:var(--c-ash); font-size:var(--fs-400); line-height:1.6; }
@media (max-width:760px){ .deflist > div{ grid-template-columns:1fr; gap:var(--s-3); } }

.stack{ display:grid; gap:var(--s-4); }
.wrap-pre{ white-space:pre-line; }
.vh{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

.tbl--items{ table-layout:fixed; min-width:1120px; }
.tbl--items td p{ margin:0 0 var(--s-3); }
.tbl--items td p:last-child{ margin-bottom:0; }

.runes-tree{ margin-bottom:var(--s-7); }
.runes-tree__h{ font-size:var(--fs-800); margin-bottom:var(--s-4); }
.runerows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--c-iron); }
.runerow{
  display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--s-5);
  padding:var(--s-5) 0; border-bottom:1px solid var(--c-iron); align-items:start;
}
.runerow__icon img{ width:42px; height:42px; border-radius:3px; border:1px solid var(--c-iron); }
.runerow__body p{ margin:0 0 var(--s-3); font-size:var(--fs-400); line-height:1.62; color:var(--c-ash); max-width:var(--w-prose); }
.runerow__body p:last-child{ margin-bottom:0; }
@media (max-width:620px){ .runerow{ grid-template-columns:1fr; gap:var(--s-3); } }

.stack{ list-style:none; margin:0; padding:0; }
.stack li{ position:relative; padding-left:var(--s-5); font-size:var(--fs-400); line-height:1.6; }
.stack li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:9px; height:1px; background:var(--c-glow-deep);
}

.build__strip{ flex-wrap:nowrap; }
@media (max-width:560px){ .build__strip{ flex-wrap:wrap; } }

.deflist dt{ overflow-wrap:anywhere; }

.wrap-pre{ white-space:normal; }

.grid{ grid-auto-rows:1fr; }
.grid > li{ display:flex; }
.card{ width:100%; align-content:center; }
.card > span{ min-width:0; }
.card__name{ display:block; overflow-wrap:anywhere; }
.card__val{ display:block; margin-top:var(--s-1); }

.build__aside{
  padding-left:var(--s-6); color:var(--c-brass-hi);
  font:600 var(--fs-200)/1.4 var(--f-chrome); text-transform:uppercase; letter-spacing:.1em;
}
.build__notes li.build__aside::before{ content:none; }

.variant + .variant{ margin-top:var(--s-7); }
.variant{ scroll-margin-top:calc(var(--s-8) + var(--s-5)); }
.variant__h{ font-size:var(--fs-800); }
.variant__spine{ margin:var(--s-4) 0 var(--s-5); max-width:26rem; }

.mini{ overflow:visible; }
.mini__in{ display:flex; align-items:center; gap:var(--s-4); width:100%; }
.mini__edge{ position:absolute; left:0; right:0; bottom:-14px; }
.mini__jump{
  margin-left:var(--s-4);
  font:500 var(--fs-400)/1 var(--f-chrome); text-transform:uppercase; letter-spacing:.05em;
  color:var(--c-bone); background:var(--c-plate);
  border:1px solid var(--c-iron); border-radius:2px; padding:var(--s-2) var(--s-3);
}
.mini__jump:hover{ border-color:var(--c-glow); }
@media (max-width:620px){
  .mini__pill{ display:none; }
  .mini__jump{ margin-left:auto; max-width:11rem; }
}

@media (max-width:620px){
  .search.is-open .search__pop{
    position:fixed; left:0; right:0; top:var(--pop-top,180px); bottom:0;
    max-height:none; z-index:9500;
    border-left:0; border-right:0; border-bottom:0;
  }
  .search.is-open .opt{ min-height:52px; }
  .search.is-open .search__group{ position:sticky; top:0; background:var(--c-forge); z-index:1; }
}

.runestrip{ display:flex; flex-wrap:wrap; gap:var(--s-2); list-style:none; margin:var(--s-3) 0 0; padding:0; }
.runestrip img{ border-radius:3px; border:1px solid var(--c-iron); }

.iconstrip{ display:flex; flex-wrap:wrap; gap:var(--s-2); list-style:none; margin:0 0 var(--s-4); padding:0; }
.iconstrip img{
  width:40px; height:40px; border-radius:3px; border:1px solid var(--c-iron);
  box-shadow:0 0 12px rgba(52,224,206,.10);
}
.iconstrip li:first-child img{ border-color:var(--c-glow-dim); box-shadow:0 0 16px rgba(52,224,206,.26); }

.banner{ position:relative; overflow:hidden; padding-block:var(--s-8) 0; margin-bottom:var(--s-7); }
.banner__wash{
  position:absolute; left:-10%; right:-10%; top:-60%; height:220%; z-index:0;
  pointer-events:none; opacity:.34;
  background-position:center 34%; background-size:cover; background-repeat:no-repeat;
  filter:blur(58px) saturate(1.3);
  -webkit-mask-image:radial-gradient(70% 60% at 22% 40%, #000 0%, transparent 76%);
  mask-image:radial-gradient(70% 60% at 22% 40%, #000 0%, transparent 76%);
}
.banner__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s-6); align-items:center;
}
.banner__portrait{
  width:168px; height:168px; border-radius:3px; border:1px solid var(--c-iron);
  box-shadow:0 0 46px rgba(52,224,206,.34), var(--bevel-raised);
}
.banner__h{ font-size:var(--fs-1000); margin-top:var(--s-3); }
.banner__lede{
  max-width:38rem; margin:var(--s-4) 0 0; font-size:var(--fs-700);
  line-height:1.5; color:var(--c-ash);
}
.banner__cta{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin:var(--s-5) 0 0; }
.btn--lit{
  color:var(--c-slag); background:var(--c-glow); border-color:var(--c-glow);
  box-shadow:0 0 26px rgba(52,224,206,.34);
}
.btn--lit:hover{ background:var(--c-glow-hot); border-color:var(--c-glow-hot); }

a.banner__roster{ text-decoration:none; }
a.banner__roster:hover img{ opacity:.8; }
.banner__roster{
  position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:3px;
  margin-top:var(--s-7); padding:var(--s-4) 0 0;
  border-top:1px solid var(--c-iron);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
}
.banner__roster img{ width:34px; height:34px; border-radius:2px; opacity:.55;
  transition:opacity var(--t-base) var(--ease); }
@media (max-width:820px){
  .banner__in{ grid-template-columns:1fr; }
  .banner__portrait{ width:112px; height:112px; }
  .banner__h{ font-size:var(--fs-900); }
}