:root{
  --officer-black:#070707;
  --officer-panel:#0d0e0f;
  --officer-panel-2:#121314;
  --officer-yellow:#ffd400;
  --officer-yellow-soft:#f1c500;
  --officer-white:#f7f6f1;
  --officer-muted:#9b9b96;
  --officer-line:rgba(255,212,0,.18);
}
.officers-page{background:var(--officer-black);color:var(--officer-white);min-height:100vh;overflow-x:hidden}
.officers-page::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 10%,rgba(255,212,0,.08),transparent 26%),radial-gradient(circle at 12% 68%,rgba(255,212,0,.035),transparent 28%);z-index:0}
.officers-site-header{position:sticky;top:0;z-index:50;background:rgba(7,7,7,.88)!important;border-bottom:1px solid rgba(255,212,0,.12);backdrop-filter:blur(16px)}
.officers-site-header .site-nav a.active{color:var(--officer-yellow)}
.officers-main,.officers-footer{position:relative;z-index:1}
.officers-main{max-width:1320px;margin:0 auto;padding:0 28px 80px}
.officers-hero{min-height:520px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);align-items:center;gap:56px;position:relative;border-bottom:1px solid var(--officer-line);overflow:hidden}
.officers-hero-glow{position:absolute;width:620px;height:620px;right:-120px;top:-145px;border-radius:50%;background:radial-gradient(circle,rgba(255,212,0,.16) 0,rgba(255,212,0,.04) 34%,transparent 68%);filter:blur(4px)}
.officers-hero-copy{position:relative;z-index:2;padding:74px 0 66px}
.officers-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--officer-yellow);font-size:11px;letter-spacing:.19em;font-weight:800;text-transform:uppercase}
.officers-kicker::before{content:"";width:34px;height:2px;background:var(--officer-yellow)}
.officers-hero h1{font-family:Arial Black,Arial,Helvetica,sans-serif;font-size:clamp(58px,7.1vw,112px);line-height:.86;letter-spacing:-.075em;margin:24px 0 28px;max-width:850px;text-transform:uppercase}
.officers-hero h1 span{color:var(--officer-yellow)}
.officers-hero p{max-width:660px;margin:0;color:#c3c3be;font-size:17px;line-height:1.75}
.officers-hero-seal{position:relative;justify-self:center;width:min(32vw,390px);aspect-ratio:1;border:1px solid rgba(255,212,0,.14);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(255,212,0,.07),rgba(255,212,0,.015) 52%,transparent 53%)}
.officers-hero-seal::before,.officers-hero-seal::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,212,0,.13)}
.officers-hero-seal::before{inset:8%}.officers-hero-seal::after{inset:18%;border-style:dashed}
.officers-hero-seal img{width:58%;height:58%;object-fit:contain;filter:drop-shadow(0 20px 45px rgba(0,0,0,.55));animation:officerSealFloat 5s ease-in-out infinite}
.officers-logo-orbit{position:absolute;inset:5%;border-radius:50%;border-top:2px solid rgba(255,212,0,.8);border-right:2px solid transparent;animation:officerSpin 13s linear infinite}
@keyframes officerSpin{to{transform:rotate(360deg)}}@keyframes officerSealFloat{50%{transform:translateY(-9px) rotate(1deg)}}
.officers-summary{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--officer-line);border-top:0;background:#090a0a}
.officer-stat{padding:24px 28px;display:flex;align-items:baseline;gap:13px;border-right:1px solid var(--officer-line)}
.officer-stat:last-child{border-right:0}.officer-stat strong{font-family:Arial Black,Arial,sans-serif;font-size:34px;color:var(--officer-yellow)}.officer-stat span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--officer-muted);font-weight:700}
.officers-directory{padding-top:72px}.officers-section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:34px}.officers-section-head h2{font-family:Arial Black,Arial,sans-serif;font-size:clamp(32px,4vw,58px);line-height:.95;letter-spacing:-.045em;margin:14px 0 0;text-transform:uppercase}
.officer-search-wrap{width:min(360px,100%);height:48px;border:1px solid rgba(255,212,0,.22);background:#0d0e0f;display:flex;align-items:center;gap:9px;padding:0 15px;border-radius:10px;color:var(--officer-yellow)}.officer-search-wrap input{width:100%;background:none;border:0;outline:0;color:var(--officer-white);font:inherit}.officer-search-wrap input::placeholder{color:#6f706d}
.officers-load-state{border:1px solid rgba(255,212,0,.14);border-radius:14px;padding:52px;text-align:center;color:#9b9b96;background:#0c0d0e}.officers-load-state.error{color:#dbc85f}.officer-hierarchy{display:flex;flex-direction:column;gap:42px}
.officer-tier-block{position:relative}.officer-tier-heading{display:flex;align-items:center;gap:14px;margin-bottom:16px}.officer-tier-heading span{color:var(--officer-yellow);font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.officer-tier-heading strong{font-size:18px;letter-spacing:-.02em}.officer-tier-heading::after{content:"";height:1px;background:linear-gradient(90deg,rgba(255,212,0,.3),rgba(255,212,0,.02));flex:1}
.officer-position-block{margin-bottom:24px}.officer-position-heading{display:flex;align-items:center;gap:12px;margin:0 0 10px}.officer-rank-chip{min-width:35px;height:24px;padding:0 8px;border-radius:999px;background:var(--officer-yellow);color:#050505;font-size:10px;font-weight:900;display:grid;place-items:center}.officer-position-heading h3{font-size:13px;text-transform:uppercase;letter-spacing:.075em;margin:0}.officer-position-heading small{color:#6f706d;font-size:11px}
.officer-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.officer-card{position:relative;min-height:220px;border:1px solid rgba(255,212,0,.13);border-radius:14px;background:linear-gradient(150deg,#111213,#0a0b0b);overflow:hidden;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;animation:officerCardIn .5s both}.officer-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 14%,rgba(255,212,0,.11),transparent 32%);opacity:.7}.officer-card:hover{transform:translateY(-5px);border-color:rgba(255,212,0,.38);box-shadow:0 18px 46px rgba(0,0,0,.38)}
@keyframes officerCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.officer-photo-shell{position:absolute;top:18px;left:20px;width:76px;height:76px;border-radius:50%;border:2px solid rgba(255,212,0,.6);padding:3px;background:#111;box-shadow:0 0 0 7px rgba(255,212,0,.035)}.officer-photo-shell img,.officer-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover}.officer-avatar{display:grid;place-items:center;background:linear-gradient(135deg,#2a260d,#0f0f0e);font-family:Arial Black,Arial,sans-serif;font-size:22px;color:var(--officer-yellow)}
.officer-card-position{position:relative;color:var(--officer-yellow);font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;margin-bottom:6px;padding-top:94px}.officer-card-name{position:relative;font-family:Arial Black,Arial,sans-serif;font-size:20px;line-height:1.03;letter-spacing:-.035em}.officer-card.vacant{border-style:dashed;opacity:.62}.officer-card.vacant .officer-card-name{color:#858580}.officer-card.vacant .officer-avatar{filter:grayscale(1)}
.officer-empty-search{padding:44px;border:1px dashed rgba(255,212,0,.2);border-radius:14px;text-align:center;color:#858580}
.officers-footer{max-width:1320px;margin:0 auto 34px;padding:24px 28px;border-top:1px solid var(--officer-line);display:flex;align-items:center;gap:13px;color:#777}.officers-footer img{width:40px;height:40px;object-fit:contain}.officers-footer div{display:flex;flex-direction:column;gap:2px}.officers-footer strong{color:#bab9b3;font-size:12px}.officers-footer span{font-size:11px}
@media(max-width:900px){.officers-main{padding:0 18px 60px}.officers-hero{grid-template-columns:1fr;min-height:auto}.officers-hero-copy{padding:58px 0 22px}.officers-hero-seal{width:min(76vw,330px);margin-bottom:52px}.officers-section-head{align-items:stretch;flex-direction:column}.officer-search-wrap{width:100%}.officers-summary{grid-template-columns:1fr}.officer-stat{border-right:0;border-bottom:1px solid var(--officer-line)}.officer-stat:last-child{border-bottom:0}}
@media(max-width:560px){.officers-hero h1{font-size:clamp(48px,17vw,74px)}.officer-cards{grid-template-columns:1fr 1fr}.officer-card{min-height:205px;padding:17px}.officer-photo-shell{width:66px;height:66px}.officer-card-position{padding-top:84px}.officer-card-name{font-size:16px}.officers-site-header{position:relative}.officers-footer{margin-bottom:0}}
@media(max-width:390px){.officer-cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.officers-logo-orbit,.officers-hero-seal img,.officer-card{animation:none!important}.officer-card{transition:none!important}}

/* ========================================================================== */
/* V1.5.1 Current Officers, portrait fighter cards + hover thunder aura        */
/* Current Officers visual layer only.                                        */
/* ========================================================================== */
.officer-cards{
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
  align-items:start;
}
.officer-card.fighter-card{
  position:relative;
  min-height:470px;
  padding:14px 14px 20px;
  border:1px solid rgba(255,212,0,.18);
  border-radius:18px;
  background:
    radial-gradient(circle at 78% 8%,rgba(255,220,70,.08),transparent 30%),
    linear-gradient(160deg,#111214 0%,#090a0b 72%);
  cursor:default;
  isolation:isolate;
  outline:none;
  justify-content:flex-start;
  overflow:visible;
  transform-style:preserve-3d;
}
.officer-card.fighter-card::before{
  border-radius:inherit;
  background:
    radial-gradient(circle at 76% 10%,rgba(255,220,72,.10),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 42%);
}
.officer-card.fighter-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  border-radius:20px;
  padding:2px;
  pointer-events:none;
  opacity:0;
  background:conic-gradient(from 15deg,
    transparent 0 8%,#fff5a8 10%,#ffd400 12%,transparent 15% 31%,
    #c98200 34%,#ffe35c 37%,transparent 40% 59%,
    #fff0a0 62%,#ffc400 66%,transparent 69% 84%,#ffd400 88%,transparent 92% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:drop-shadow(0 0 4px rgba(255,212,0,.75)) drop-shadow(0 0 12px rgba(255,176,0,.28));
  transition:opacity .14s ease;
}
.officer-card.fighter-card:focus-visible{
  box-shadow:0 0 0 2px #070707,0 0 0 4px rgba(255,212,0,.88),0 20px 54px rgba(0,0,0,.42)
}

/* True portrait holder, optimized for vertical officer photos. */
.officer-fighter-frame{
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  min-height:320px;
  padding:5px;
  clip-path:polygon(11% 0,87% 0,100% 9%,97% 82%,85% 100%,8% 100%,0 90%,3% 12%);
  background:
    linear-gradient(112deg,#1c1606 0 7%,transparent 7% 10%,#ffe36b 10% 13%,transparent 13%),
    linear-gradient(145deg,#fff0a0 0%,#cf8e00 22%,#342507 43%,#f6bc08 65%,#ffea8b 83%,#704800 100%);
  box-shadow:inset 0 0 0 1px rgba(255,239,166,.42),0 18px 38px rgba(0,0,0,.38);
  transition:transform .26s cubic-bezier(.2,.75,.25,1),filter .26s ease,box-shadow .26s ease;
  z-index:2;
}
.officer-fighter-frame::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:4;
  pointer-events:none;
  clip-path:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,220,76,.24),inset 0 -40px 58px rgba(0,0,0,.42);
  background:linear-gradient(160deg,rgba(255,255,255,.15),transparent 19%,transparent 70%,rgba(255,201,0,.07));
}
.officer-fighter-frame::after{
  content:"";
  position:absolute;
  left:9%;right:9%;bottom:6px;height:3px;
  z-index:7;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff3b3 17%,#ffd400 50%,#fff3b3 83%,transparent);
  filter:drop-shadow(0 0 6px rgba(255,212,0,.72));
}
.officer-fighter-media{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  display:grid;
  place-items:center;
  clip-path:polygon(11% 0,87% 0,100% 9%,97% 82%,85% 100%,8% 100%,0 90%,3% 12%);
  background:
    radial-gradient(circle at 50% 30%,rgba(255,212,0,.18),transparent 38%),
    linear-gradient(150deg,#28230f,#0a0b0c 72%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.72);
}
.officer-fighter-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.02) 0 55%,rgba(0,0,0,.22) 75%,rgba(0,0,0,.72) 100%),
    linear-gradient(90deg,rgba(0,0,0,.16),transparent 18% 82%,rgba(0,0,0,.16));
}
.officer-fighter-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 18%;
  filter:saturate(.98) contrast(1.055) brightness(1.02);
  transform:scale(1.012);
  transition:transform .42s cubic-bezier(.2,.75,.25,1),filter .3s ease;
}
.officer-fighter-initials{
  width:100%;height:100%;
  display:grid;place-items:center;
  font-family:Arial Black,Arial,sans-serif;
  font-size:78px;
  letter-spacing:-.08em;
  color:#ffd400;
  background:linear-gradient(145deg,#25210f,#090a0b 75%);
  text-shadow:0 8px 30px rgba(0,0,0,.45)
}
.officer-fighter-aura{
  position:absolute;
  inset:-8% -10%;
  z-index:-1;
  border-radius:26px;
  background:radial-gradient(ellipse at 50% 45%,rgba(255,216,62,.28),transparent 53%);
  filter:blur(15px);
  opacity:.52;
  transition:opacity .2s ease,filter .2s ease,transform .24s ease;
}
.officer-fighter-edge{
  position:absolute;
  z-index:8;
  top:11%;bottom:13%;
  width:2px;
  background:linear-gradient(180deg,transparent,#fff2ad 11%,#ffd400 27%,#8b5900 52%,#ffe36a 75%,#fff2ad 88%,transparent);
  opacity:.82;
  pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(255,212,0,.42));
}
.officer-fighter-edge.edge-left{left:7px;transform:skewY(-18deg)}
.officer-fighter-edge.edge-right{right:7px;transform:skewY(18deg)}
.officer-fighter-crest{
  position:absolute;z-index:9;left:50%;top:-6px;transform:translateX(-50%);
  width:34px;height:9px;
  clip-path:polygon(18% 0,82% 0,100% 50%,82% 100%,18% 100%,0 50%);
  background:linear-gradient(90deg,#583900,#ffd75a,#fff2a6,#c98400,#583900);
  box-shadow:0 0 10px rgba(255,212,0,.38)
}
.officer-card-copy{position:relative;z-index:3;padding:15px 8px 0}
.officer-card.fighter-card .officer-card-position{padding-top:0;margin-bottom:7px;color:#ffd400;font-size:9px;letter-spacing:.16em}
.officer-card.fighter-card .officer-card-name{font-size:21px;line-height:1.02}
.officer-card-status{margin-top:9px;color:#686963;font-size:8px;letter-spacing:.17em;font-weight:900}

/* Fighter hierarchy material treatments. */
.officer-card.fighter-president .officer-fighter-frame{
  padding:6px;
  background:linear-gradient(142deg,#fff8cb,#ffd400 23%,#402800 46%,#ffe97e 72%,#8d5800);
  filter:drop-shadow(0 15px 26px rgba(255,212,0,.15))
}
.officer-card.fighter-president .officer-fighter-crest{
  width:48px;height:16px;top:-11px;
  clip-path:polygon(0 100%,8% 28%,29% 61%,50% 0,71% 61%,92% 28%,100% 100%)
}
.officer-card.fighter-vice .officer-fighter-frame,.officer-card.fighter-secretary .officer-fighter-frame{
  background:linear-gradient(142deg,#fff1a0,#e6a600 28%,#352407 50%,#f6ca45 73%,#725000)
}
.officer-card.fighter-lead .officer-fighter-frame{
  background:linear-gradient(142deg,#ffe78a,#c98900 27%,#201b0b 52%,#e5a500 76%,#604000)
}
.officer-card.fighter-assistant .officer-fighter-frame,.officer-card.fighter-representative .officer-fighter-frame,.officer-card.fighter-junior .officer-fighter-frame{
  filter:saturate(.9) brightness(.98)
}
.officer-fighter-vacant{
  width:100%;height:100%;
  display:grid;place-items:center;align-content:center;gap:8px;
  background:radial-gradient(circle at 50% 40%,rgba(255,212,0,.08),transparent 35%),linear-gradient(150deg,#171713,#080909)
}
.officer-fighter-vacant span{font-family:Arial Black,Arial,sans-serif;font-size:92px;line-height:.8;color:#3e3b2d;text-shadow:0 0 18px rgba(255,212,0,.12)}
.officer-fighter-vacant small{font-size:8px;letter-spacing:.24em;color:#8c7a25;font-weight:900}
.officer-card.fighter-card.vacant{opacity:.78;border-style:solid}
.officer-card.fighter-card.vacant .officer-fighter-frame{filter:grayscale(.24) saturate(.65)}

/* Hover aura, no click trigger. */
.officer-hover-thunder{
  position:absolute;
  inset:-12px;
  z-index:24;
  pointer-events:none;
  opacity:0;
  filter:drop-shadow(0 0 4px rgba(255,232,111,.95)) drop-shadow(0 0 10px rgba(255,190,0,.62));
}
.officer-hover-thunder i{
  --r:0deg;
  position:absolute;
  display:block;
  width:5px;
  height:42px;
  opacity:0;
  background:linear-gradient(180deg,#fffbd2 0 18%,#ffe96f 18% 58%,#ffbf00 58% 100%);
  clip-path:polygon(48% 0,100% 0,64% 38%,91% 38%,22% 100%,42% 57%,8% 57%);
  transform:rotate(var(--r)) scaleY(.55);
}
.officer-hover-thunder .bolt-1{left:5%;top:7%;--r:-22deg}
.officer-hover-thunder .bolt-2{right:7%;top:4%;--r:18deg;height:52px}
.officer-hover-thunder .bolt-3{left:-1%;top:39%;--r:9deg;height:58px}
.officer-hover-thunder .bolt-4{right:-1%;top:42%;--r:-12deg;height:55px}
.officer-hover-thunder .bolt-5{left:13%;bottom:2%;--r:21deg;height:44px}
.officer-hover-thunder .bolt-6{right:12%;bottom:1%;--r:-18deg;height:48px}
.officer-hover-thunder .bolt-7{left:48%;top:-7%;--r:4deg;height:33px}
.officer-hover-thunder .bolt-8{left:50%;bottom:-8%;--r:183deg;height:36px}

@keyframes officerHoverBolt{
  0%,100%{opacity:0;transform:rotate(var(--r)) scaleY(.35) translateY(2px);filter:brightness(1)}
  12%{opacity:1;transform:rotate(var(--r)) scaleY(1.05) translateY(0);filter:brightness(1.75)}
  24%{opacity:.18}
  38%{opacity:.92;transform:rotate(var(--r)) scaleY(.82)}
  55%{opacity:.08}
  72%{opacity:.72;transform:rotate(var(--r)) scaleY(1.12)}
  83%{opacity:.16}
}
@keyframes officerBorderAura{
  0%,100%{filter:drop-shadow(0 0 4px rgba(255,212,0,.70)) drop-shadow(0 0 10px rgba(255,166,0,.18))}
  50%{filter:drop-shadow(0 0 8px rgba(255,246,174,.95)) drop-shadow(0 0 20px rgba(255,191,0,.55))}
}
@keyframes officerEdgeFlicker{
  0%,100%{opacity:.72;filter:drop-shadow(0 0 2px rgba(255,212,0,.30))}
  23%{opacity:1;filter:drop-shadow(0 0 7px rgba(255,232,114,.95))}
  28%{opacity:.35}
  34%{opacity:1}
  69%{opacity:.76}
  74%{opacity:1;filter:drop-shadow(0 0 10px rgba(255,196,0,.82))}
}

@media (hover:hover) and (pointer:fine){
  .officer-card.fighter-card:hover{
    transform:translateY(-7px) scale(1.012);
    border-color:rgba(255,223,78,.72);
    box-shadow:
      0 28px 68px rgba(0,0,0,.48),
      0 0 0 1px rgba(255,212,0,.18),
      0 0 24px rgba(255,187,0,.12);
  }
  .officer-card.fighter-card:hover::after{
    opacity:1;
    animation:officerBorderAura .72s steps(2,end) infinite;
  }
  .officer-card.fighter-card:hover .officer-fighter-frame{
    transform:translateY(-5px) scale(1.018);
    filter:drop-shadow(0 17px 26px rgba(0,0,0,.38)) drop-shadow(0 0 9px rgba(255,212,0,.26));
    box-shadow:inset 0 0 0 1px rgba(255,249,205,.56),0 20px 42px rgba(0,0,0,.42),0 0 20px rgba(255,212,0,.12);
  }
  .officer-card.fighter-card:hover .officer-fighter-media img{
    transform:scale(1.048);
    filter:saturate(1.04) contrast(1.075) brightness(1.045);
  }
  .officer-card.fighter-card:hover .officer-fighter-aura{
    opacity:1;
    filter:blur(17px);
    transform:scale(1.055);
  }
  .officer-card.fighter-card:hover .officer-fighter-edge{
    animation:officerEdgeFlicker .63s steps(2,end) infinite;
  }
  .officer-card.fighter-card:hover .officer-hover-thunder{opacity:1}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-1{animation:officerHoverBolt .58s steps(2,end) infinite 0ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-2{animation:officerHoverBolt .66s steps(2,end) infinite 80ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-3{animation:officerHoverBolt .72s steps(2,end) infinite 145ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-4{animation:officerHoverBolt .61s steps(2,end) infinite 35ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-5{animation:officerHoverBolt .76s steps(2,end) infinite 190ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-6{animation:officerHoverBolt .63s steps(2,end) infinite 120ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-7{animation:officerHoverBolt .54s steps(2,end) infinite 215ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-8{animation:officerHoverBolt .69s steps(2,end) infinite 50ms}
}

/* Keyboard users get the same aura without requiring a click. */
.officer-card.fighter-card:focus-visible::after{opacity:1;animation:officerBorderAura .8s steps(2,end) infinite}
.officer-card.fighter-card:focus-visible .officer-hover-thunder{opacity:1}
.officer-card.fighter-card:focus-visible .officer-hover-thunder i{animation:officerHoverBolt .72s steps(2,end) infinite}

@media(max-width:900px){
  .officer-cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
  .officer-card.fighter-card{min-height:430px}
}
@media(max-width:560px){
  .officer-cards{grid-template-columns:1fr 1fr;gap:12px}
  .officer-card.fighter-card{min-height:355px;padding:10px 10px 15px}
  .officer-fighter-frame{min-height:0;aspect-ratio:3/4}
  .officer-card.fighter-card .officer-card-name{font-size:16px}
  .officer-card.fighter-card .officer-card-position{font-size:8px}
  .officer-card-status{font-size:7px}
}
@media(max-width:460px){
  .officer-cards{grid-template-columns:1fr}
  .officer-card.fighter-card{width:min(100%,340px);min-height:470px;margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){
  .officer-hover-thunder{display:none!important}
  .officer-card.fighter-card::after{animation:none!important}
  .officer-card.fighter-card:hover .officer-fighter-edge{animation:none!important}
  .officer-card.fighter-card,.officer-fighter-frame,.officer-fighter-media img,.officer-fighter-aura{transition:none!important}
}

/* ========================================================================== */
/* V1.5.2 Current Officers, medium portrait fighter card sizing               */
/* Prevent a single officer slot from stretching across an entire position.   */
/* ========================================================================== */
.officer-cards{
  grid-template-columns:repeat(auto-fit,minmax(190px,220px));
  justify-content:center;
  gap:16px;
}
.officer-card.fighter-card{
  width:100%;
  max-width:220px;
  min-height:0;
  padding:10px 10px 14px;
  border-radius:15px;
}
.officer-card.fighter-card::after{border-radius:17px}
.officer-fighter-frame{
  min-height:0;
  aspect-ratio:3/4;
  padding:4px;
}
.officer-fighter-frame::before{inset:4px}
.officer-fighter-crest{width:29px;height:8px;top:-5px}
.officer-card.fighter-president .officer-fighter-crest{width:40px;height:13px;top:-9px}
.officer-card-copy{padding:11px 6px 0}
.officer-card.fighter-card .officer-card-position{font-size:8px;margin-bottom:5px;letter-spacing:.145em}
.officer-card.fighter-card .officer-card-name{font-size:17px;line-height:1.04}
.officer-card-status{margin-top:7px;font-size:7px}
.officer-fighter-initials{font-size:58px}
.officer-hover-thunder{inset:-9px}
.officer-hover-thunder i{width:4px;height:34px}
.officer-hover-thunder .bolt-2{height:40px}
.officer-hover-thunder .bolt-3{height:44px}
.officer-hover-thunder .bolt-4{height:42px}
.officer-hover-thunder .bolt-5{height:34px}
.officer-hover-thunder .bolt-6{height:36px}
.officer-hover-thunder .bolt-7{height:27px}
.officer-hover-thunder .bolt-8{height:28px}

@media (hover:hover) and (pointer:fine){
  .officer-card.fighter-card:hover{transform:translateY(-5px) scale(1.018)}
  .officer-card.fighter-card:hover .officer-fighter-frame{transform:translateY(-3px) scale(1.015)}
}

@media(max-width:900px){
  .officer-cards{grid-template-columns:repeat(auto-fit,minmax(180px,210px));gap:14px}
  .officer-card.fighter-card{max-width:210px;min-height:0}
}
@media(max-width:560px){
  .officer-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;justify-content:stretch}
  .officer-card.fighter-card{width:100%;max-width:none;min-height:0;padding:8px 8px 12px}
  .officer-card.fighter-card .officer-card-name{font-size:14px}
  .officer-fighter-initials{font-size:44px}
}
@media(max-width:390px){
  .officer-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .officer-card.fighter-card{width:100%;max-width:none;min-height:0;margin:0}
}


/* ========================================================================== */
/* V1.5.3 Current Officers, compact role clusters + restrained violent thunder */
/* Public Current Officers visual layer only.                                  */
/* ========================================================================== */

/* Group related roles into tighter CES hierarchy clusters, closer to the
   supplied hierarchy reference while keeping the medium 3:4 fighter cards. */
.officer-hierarchy{gap:24px}
.officer-tier-block{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,212,0,.105);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% -25%,rgba(255,212,0,.045),transparent 42%),
    linear-gradient(180deg,rgba(17,18,18,.78),rgba(8,9,9,.54));
}
.officer-tier-heading{
  grid-column:1/-1;
  margin:0 0 2px;
  min-height:28px;
}
.officer-position-block{
  margin:0;
  min-width:0;
  padding:10px;
  border:1px solid rgba(255,212,0,.14);
  border-radius:18px;
  background:linear-gradient(155deg,rgba(18,19,20,.94),rgba(11,12,12,.86));
  box-shadow:inset 0 1px rgba(255,255,255,.018),0 12px 30px rgba(0,0,0,.14);
}
.officer-position-heading{margin:0 0 10px;padding:0 2px 8px;border-bottom:1px solid rgba(255,212,0,.10)}
.officer-rank-chip{min-width:31px;height:21px;font-size:9px}
.officer-position-heading h3{font-size:11px;line-height:1.25}
.officer-position-heading small{margin-left:auto;white-space:nowrap}
.officer-position-block .officer-cards{
  grid-template-columns:repeat(auto-fit,minmax(190px,220px));
  justify-content:center;
  gap:12px;
}
.officer-position-block.multi-slot .officer-cards{
  grid-template-columns:repeat(auto-fit,minmax(185px,220px));
}

/* Executive hierarchy mirrors the denser reference rhythm: one head, then a
   2-card leadership row followed by the remaining executive roles. */
.officer-tier-block.tier-executive-head .officer-position-block{
  grid-column:1/-1;
  width:min(100%,250px);
  justify-self:center;
}
.officer-tier-block.tier-executive-council{grid-template-columns:repeat(6,minmax(0,1fr))}
.officer-tier-block.tier-executive-council .officer-position-block{grid-column:span 2}
.officer-tier-block.tier-executive-council .position-index-0,
.officer-tier-block.tier-executive-council .position-index-1{grid-column:span 3}
.officer-tier-block.tier-functional-leads{grid-template-columns:repeat(3,minmax(0,1fr))}
.officer-tier-block.tier-assistant-officers{grid-template-columns:repeat(3,minmax(0,1fr))}
.officer-tier-block.tier-year-representatives{grid-template-columns:repeat(2,minmax(0,1fr))}
.officer-tier-block.tier-committees{grid-template-columns:repeat(2,minmax(0,1fr))}
.officer-tier-block.tier-juniors{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Thor-like CES thunder: the card looks electrically restrained until hover,
   then energy races along the frame and throws short arcs outside the border. */
.officer-card.fighter-card{
  --thunder-core:#fffbd1;
  --thunder-hot:#ffe768;
  --thunder-main:#ffd400;
  --thunder-deep:#ffad00;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .18s ease,box-shadow .22s ease;
}
.officer-card.fighter-card::after{
  inset:-2px;
  border-radius:19px;
  padding:2px;
  opacity:0;
  background:
    conic-gradient(from 7deg,
      transparent 0 6%,var(--thunder-core) 7.2%,var(--thunder-main) 8.5%,transparent 10.5% 22%,
      var(--thunder-deep) 23.5%,var(--thunder-hot) 25%,transparent 27% 41%,
      var(--thunder-core) 43%,var(--thunder-main) 44.2%,transparent 46% 59%,
      var(--thunder-deep) 61%,var(--thunder-core) 62.5%,transparent 64.5% 78%,
      var(--thunder-main) 80%,var(--thunder-core) 81.2%,transparent 83% 93%,
      var(--thunder-deep) 95%,transparent 97% 100%);
  filter:drop-shadow(0 0 3px rgba(255,251,209,.9)) drop-shadow(0 0 9px rgba(255,212,0,.68));
}
.officer-hover-thunder{
  inset:-19px;
  opacity:0;
  filter:
    drop-shadow(0 0 2px rgba(255,255,222,1))
    drop-shadow(0 0 7px rgba(255,226,70,.96))
    drop-shadow(0 0 15px rgba(255,170,0,.52));
  mix-blend-mode:screen;
}
.officer-hover-thunder::before,
.officer-hover-thunder::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:20px;
  opacity:0;
  pointer-events:none;
}
.officer-hover-thunder::before{
  background:
    linear-gradient(94deg,transparent 2%,#fffbd2 4%,#ffd400 5%,transparent 7%) top 13% left 0/100% 2px no-repeat,
    linear-gradient(87deg,transparent 45%,#fffbd2 48%,#ffd400 50%,transparent 53%) bottom 8% left 0/100% 2px no-repeat,
    linear-gradient(180deg,transparent 14%,#fffbd2 17%,#ffd400 19%,transparent 22% 63%,#ffd400 66%,#fffbd2 68%,transparent 71%) left 7% top 0/2px 100% no-repeat,
    linear-gradient(180deg,transparent 34%,#fffbd2 37%,#ffd400 39%,transparent 42% 77%,#ffd400 80%,transparent 83%) right 6% top 0/2px 100% no-repeat;
}
.officer-hover-thunder::after{
  inset:3px;
  border:1px solid rgba(255,223,72,.35);
  box-shadow:
    0 0 4px rgba(255,250,190,.72),
    0 0 12px rgba(255,212,0,.48),
    inset 0 0 7px rgba(255,212,0,.18);
}
.officer-hover-thunder i{
  width:3px;
  height:50px;
  transform-origin:50% 50%;
  background:linear-gradient(180deg,var(--thunder-core) 0 16%,var(--thunder-hot) 16% 55%,var(--thunder-main) 55% 82%,var(--thunder-deep));
  clip-path:polygon(42% 0,100% 0,61% 27%,92% 27%,46% 55%,78% 55%,0 100%,30% 64%,6% 64%,50% 35%,18% 35%);
}
.officer-hover-thunder .bolt-1{left:4%;top:5%;--r:-35deg;height:48px}
.officer-hover-thunder .bolt-2{right:4%;top:3%;--r:32deg;height:60px}
.officer-hover-thunder .bolt-3{left:-1%;top:34%;--r:-5deg;height:72px}
.officer-hover-thunder .bolt-4{right:-1%;top:39%;--r:7deg;height:68px}
.officer-hover-thunder .bolt-5{left:11%;bottom:-2%;--r:28deg;height:54px}
.officer-hover-thunder .bolt-6{right:10%;bottom:-2%;--r:-31deg;height:58px}
.officer-hover-thunder .bolt-7{left:47%;top:-8%;--r:4deg;height:44px}
.officer-hover-thunder .bolt-8{left:51%;bottom:-10%;--r:184deg;height:48px}

@keyframes officerThunderCage{
  0%,100%{opacity:.35;transform:scale(.997);filter:brightness(1)}
  7%{opacity:1;transform:scale(1.002);filter:brightness(1.55)}
  11%{opacity:.32}
  16%{opacity:.88}
  39%{opacity:.42}
  44%{opacity:1;filter:brightness(1.8)}
  48%{opacity:.25}
  72%{opacity:.72}
  78%{opacity:1}
  83%{opacity:.38}
}
@keyframes officerArcEscape{
  0%,100%{opacity:0;transform:rotate(var(--r)) scaleY(.18) translateY(3px)}
  6%{opacity:.96;transform:rotate(var(--r)) scaleY(1.14) translateY(-1px)}
  11%{opacity:.12;transform:rotate(var(--r)) scaleY(.58)}
  18%{opacity:.78;transform:rotate(var(--r)) scaleY(.92) translateX(2px)}
  23%,57%{opacity:0}
  61%{opacity:.86;transform:rotate(var(--r)) scaleY(1.24) translateY(-2px)}
  67%{opacity:.16}
  74%{opacity:.62;transform:rotate(var(--r)) scaleY(.8)}
  80%{opacity:0}
}
@keyframes officerChargedFrame{
  0%,100%{filter:drop-shadow(0 0 3px rgba(255,239,124,.82)) drop-shadow(0 0 9px rgba(255,190,0,.4))}
  12%{filter:drop-shadow(0 0 5px rgba(255,255,219,1)) drop-shadow(0 0 17px rgba(255,212,0,.85))}
  19%{filter:drop-shadow(0 0 2px rgba(255,228,76,.64)) drop-shadow(0 0 7px rgba(255,169,0,.3))}
  47%{filter:drop-shadow(0 0 5px rgba(255,250,190,.95)) drop-shadow(0 0 14px rgba(255,197,0,.68))}
  52%{filter:drop-shadow(0 0 2px rgba(255,212,0,.6))}
  76%{filter:drop-shadow(0 0 5px rgba(255,255,220,.98)) drop-shadow(0 0 16px rgba(255,184,0,.72))}
}

@media (hover:hover) and (pointer:fine){
  .officer-card.fighter-card:hover{
    transform:translateY(-6px) scale(1.014);
    border-color:rgba(255,229,92,.88);
    box-shadow:
      0 26px 62px rgba(0,0,0,.48),
      0 0 0 1px rgba(255,221,56,.34),
      0 0 18px rgba(255,212,0,.22),
      0 0 42px rgba(255,166,0,.11);
  }
  .officer-card.fighter-card:hover::after{
    opacity:1;
    animation:officerChargedFrame .88s steps(2,end) infinite;
  }
  .officer-card.fighter-card:hover .officer-hover-thunder{
    opacity:1;
  }
  .officer-card.fighter-card:hover .officer-hover-thunder::before{
    animation:officerThunderCage 1.16s steps(2,end) infinite;
  }
  .officer-card.fighter-card:hover .officer-hover-thunder::after{
    animation:officerThunderCage .82s steps(2,end) infinite reverse;
  }
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-1{animation:officerArcEscape .92s steps(2,end) infinite 0ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-2{animation:officerArcEscape 1.04s steps(2,end) infinite 110ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-3{animation:officerArcEscape .84s steps(2,end) infinite 260ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-4{animation:officerArcEscape 1.08s steps(2,end) infinite 55ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-5{animation:officerArcEscape .96s steps(2,end) infinite 350ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-6{animation:officerArcEscape .88s steps(2,end) infinite 180ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-7{animation:officerArcEscape .78s steps(2,end) infinite 420ms}
  .officer-card.fighter-card:hover .officer-hover-thunder .bolt-8{animation:officerArcEscape 1.02s steps(2,end) infinite 95ms}
  .officer-card.fighter-card:hover .officer-fighter-edge{
    animation:officerEdgeFlicker .52s steps(2,end) infinite;
    filter:drop-shadow(0 0 5px rgba(255,248,174,.94)) drop-shadow(0 0 12px rgba(255,194,0,.7));
  }
  .officer-card.fighter-card:hover .officer-fighter-aura{
    opacity:1;
    filter:blur(18px) saturate(1.3);
    transform:scale(1.07);
  }
}

/* Keyboard focus keeps a non-flashy equivalent of the same charged frame. */
.officer-card.fighter-card:focus-visible .officer-hover-thunder::before,
.officer-card.fighter-card:focus-visible .officer-hover-thunder::after{opacity:.82}

@media(max-width:1050px){
  .officer-tier-block,
  .officer-tier-block.tier-executive-council,
  .officer-tier-block.tier-functional-leads,
  .officer-tier-block.tier-assistant-officers,
  .officer-tier-block.tier-juniors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .officer-tier-block.tier-executive-council .officer-position-block,
  .officer-tier-block.tier-executive-council .position-index-0,
  .officer-tier-block.tier-executive-council .position-index-1{grid-column:span 1}
  .officer-tier-block.tier-executive-head .officer-position-block{grid-column:1/-1}
}
@media(max-width:720px){
  .officer-tier-block,
  .officer-tier-block.tier-executive-council,
  .officer-tier-block.tier-functional-leads,
  .officer-tier-block.tier-assistant-officers,
  .officer-tier-block.tier-year-representatives,
  .officer-tier-block.tier-committees,
  .officer-tier-block.tier-juniors{grid-template-columns:1fr}
  .officer-tier-block.tier-executive-council .officer-position-block,
  .officer-tier-block.tier-executive-council .position-index-0,
  .officer-tier-block.tier-executive-council .position-index-1{grid-column:1}
  .officer-position-block{padding:9px}
}
@media(prefers-reduced-motion:reduce){
  .officer-hover-thunder::before,.officer-hover-thunder::after{animation:none!important}
}

/* ========================================================================== */
/* V1.5.4 Current Officers, plasma-thunder hover refinement                   */
/* Motion reference: layered turbulent energy plume wrapped around lightning. */
/* Current Officers visual layer only.                                        */
/* ========================================================================== */

/* Soft, turbulent golden plasma sits behind the electrical arcs. It is
   intentionally diffuse and asymmetrical so the hover feels alive rather than
   like a looping neon border. */
.officer-energy-plasma{
  position:absolute;
  inset:-24px;
  z-index:4;
  pointer-events:none;
  opacity:0;
  overflow:visible;
  mix-blend-mode:screen;
  filter:saturate(1.12) contrast(1.05);
  transition:opacity .13s ease;
}
.officer-energy-plasma::before,
.officer-energy-plasma::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:25px;
  pointer-events:none;
  opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.officer-energy-plasma::before{
  padding:8px;
  background:
    radial-gradient(ellipse at 11% 23%,rgba(255,248,184,.92) 0 2%,rgba(255,215,42,.62) 8%,transparent 23%),
    radial-gradient(ellipse at 88% 18%,rgba(255,244,169,.82) 0 3%,rgba(255,187,0,.58) 9%,transparent 25%),
    radial-gradient(ellipse at 96% 66%,rgba(255,228,87,.80) 0 2%,rgba(255,157,0,.52) 10%,transparent 27%),
    radial-gradient(ellipse at 15% 83%,rgba(255,248,190,.88) 0 2%,rgba(255,193,0,.60) 10%,transparent 28%),
    radial-gradient(ellipse at 52% 99%,rgba(255,239,126,.82) 0 2%,rgba(255,171,0,.55) 10%,transparent 28%),
    conic-gradient(from 18deg,transparent 0 8%,rgba(255,215,38,.42) 13%,transparent 20% 31%,rgba(255,167,0,.48) 38%,transparent 45% 58%,rgba(255,229,86,.44) 65%,transparent 72% 86%,rgba(255,184,0,.40) 92%,transparent 100%);
  filter:blur(8px) drop-shadow(0 0 10px rgba(255,188,0,.42));
}
.officer-energy-plasma::after{
  inset:1px;
  padding:4px;
  background:
    conic-gradient(from 0deg,
      transparent 0 4%,rgba(255,255,221,.92) 5%,rgba(255,213,36,.70) 7%,transparent 10% 24%,
      rgba(255,176,0,.62) 28%,transparent 31% 43%,rgba(255,247,171,.88) 47%,rgba(255,198,0,.66) 50%,transparent 53% 68%,
      rgba(255,163,0,.56) 72%,transparent 75% 88%,rgba(255,244,155,.86) 92%,transparent 96% 100%);
  filter:blur(2.2px) drop-shadow(0 0 5px rgba(255,233,111,.70));
}

/* Individual plasma tongues emulate the reference's smoky, self-folding
   motion. They never cover the portrait center, only lick around the frame. */
.officer-energy-plasma b{
  position:absolute;
  display:block;
  width:38px;
  height:92px;
  border-radius:55% 45% 62% 38% / 68% 54% 46% 32%;
  opacity:0;
  transform-origin:50% 82%;
  background:
    radial-gradient(ellipse at 50% 72%,rgba(255,255,215,.78) 0 4%,rgba(255,224,67,.54) 17%,rgba(255,169,0,.30) 38%,transparent 70%);
  filter:blur(7px) drop-shadow(0 0 7px rgba(255,196,0,.52));
  will-change:transform,opacity,filter;
}
.officer-energy-plasma .plasma-1{left:-3px;top:10%;--tx:5px;--ty:-11px;--rot:-13deg;--sx:.86;--sy:1.05}
.officer-energy-plasma .plasma-2{right:-4px;top:20%;--tx:-6px;--ty:-15px;--rot:15deg;--sx:.76;--sy:1.18}
.officer-energy-plasma .plasma-3{left:7%;bottom:-11px;--tx:9px;--ty:-20px;--rot:22deg;--sx:1.02;--sy:.88}
.officer-energy-plasma .plasma-4{right:8%;bottom:-13px;--tx:-8px;--ty:-18px;--rot:-20deg;--sx:.94;--sy:.96}
.officer-energy-plasma .plasma-5{left:31%;top:-20px;width:48px;height:76px;--tx:-5px;--ty:12px;--rot:-7deg;--sx:.90;--sy:.86}
.officer-energy-plasma .plasma-6{right:29%;top:-18px;width:44px;height:72px;--tx:6px;--ty:10px;--rot:9deg;--sx:.82;--sy:.91}
.officer-energy-plasma .plasma-7{left:-10px;bottom:25%;height:76px;--tx:13px;--ty:-7px;--rot:-26deg;--sx:.72;--sy:1.08}
.officer-energy-plasma .plasma-8{right:-10px;bottom:31%;height:82px;--tx:-12px;--ty:-9px;--rot:25deg;--sx:.75;--sy:1.12}

@keyframes officerPlasmaBreathe{
  0%,100%{opacity:.32;transform:scale(.985) rotate(-.5deg);filter:blur(8px) brightness(.95)}
  18%{opacity:.82;transform:scale(1.02) rotate(.7deg);filter:blur(7px) brightness(1.18)}
  36%{opacity:.48;transform:scale(.998) rotate(-.8deg)}
  58%{opacity:.92;transform:scale(1.025) rotate(.5deg);filter:blur(8.5px) brightness(1.26)}
  76%{opacity:.43;transform:scale(1.006) rotate(-.3deg)}
}
@keyframes officerPlasmaLick{
  0%,100%{opacity:0;transform:translate(0,9px) rotate(var(--rot)) scale(.45,.30);filter:blur(9px) brightness(.85)}
  9%{opacity:.72;transform:translate(calc(var(--tx)*.25),calc(var(--ty)*.20)) rotate(calc(var(--rot) - 4deg)) scale(.78,.72);filter:blur(7px) brightness(1.12)}
  21%{opacity:.42;transform:translate(calc(var(--tx)*.55),calc(var(--ty)*.45)) rotate(calc(var(--rot) + 5deg)) scale(var(--sx),var(--sy))}
  38%{opacity:.92;transform:translate(var(--tx),var(--ty)) rotate(calc(var(--rot) - 2deg)) scale(calc(var(--sx)*1.12),calc(var(--sy)*1.08));filter:blur(6px) brightness(1.34)}
  53%{opacity:.27;transform:translate(calc(var(--tx)*.75),calc(var(--ty)*1.16)) rotate(calc(var(--rot) + 9deg)) scale(.74,1.10)}
  68%{opacity:.80;transform:translate(calc(var(--tx)*1.12),calc(var(--ty)*.62)) rotate(calc(var(--rot) - 7deg)) scale(1.04,.83);filter:blur(7.5px) brightness(1.18)}
  82%{opacity:.18;transform:translate(calc(var(--tx)*.45),calc(var(--ty)*1.22)) rotate(calc(var(--rot) + 3deg)) scale(.65,.92)}
}
@keyframes officerPlasmaTrace{
  0%,100%{opacity:.20;transform:rotate(0deg) scale(.995)}
  12%{opacity:.82;transform:rotate(.8deg) scale(1.006)}
  19%{opacity:.34}
  43%{opacity:.70;transform:rotate(-.7deg) scale(1.012)}
  49%{opacity:.23}
  71%{opacity:.88;transform:rotate(.5deg) scale(1.004)}
  79%{opacity:.36}
}

/* The lightning itself becomes thinner and more branched, while the new
   plasma layer provides body and turbulence. */
.officer-hover-thunder i{
  width:2px;
  filter:drop-shadow(0 0 2px rgba(255,255,222,1)) drop-shadow(0 0 7px rgba(255,205,0,.86));
}
.officer-hover-thunder i::after{
  content:"";
  position:absolute;
  left:1px;
  top:35%;
  width:2px;
  height:42%;
  background:linear-gradient(180deg,#fffbd7,#ffd400 65%,transparent);
  transform-origin:top center;
  transform:rotate(42deg) skewX(-8deg);
  clip-path:polygon(38% 0,100% 0,58% 38%,92% 38%,0 100%,32% 55%,8% 55%);
  opacity:.82;
  filter:drop-shadow(0 0 3px rgba(255,224,58,.86));
}

@media (hover:hover) and (pointer:fine){
  .officer-card.fighter-card:hover .officer-energy-plasma{
    opacity:1;
  }
  .officer-card.fighter-card:hover .officer-energy-plasma::before{
    opacity:1;
    animation:officerPlasmaBreathe 2.15s ease-in-out infinite;
  }
  .officer-card.fighter-card:hover .officer-energy-plasma::after{
    opacity:1;
    animation:officerPlasmaTrace 1.12s steps(3,end) infinite;
  }
  .officer-card.fighter-card:hover .officer-energy-plasma .plasma-1{animation:officerPlasmaLick 1.84s ease-in-out infinite 0ms}
  .officer-card.fighter-card:hover .officer-energy-plasma .plasma-2{animation:officerPlasmaLick 2.08s ease-in-out infinite 210ms}
  .officer-card.fighter-card:hover .officer-energy-plasma .plasma-3{animation:officerPlasmaLick 1.67s ease-in-out infinite 430ms}
  .officer-card.fighter-card:hover .officer-energy-plasma .plasma-4{animation:officerPlasmaLick 2.24s ease-in-out infinite 90ms}
  .officer-card.fighter-card:hover .officer-energy-plasma .plasma-5{animation:officerPlasmaLick 1.92s ease-in-out infinite 620ms}
  .officer-card.fighter-card:hover .officer-energy-plasma .plasma-6{animation:officerPlasmaLick 2.18s ease-in-out infinite 340ms}
  .officer-card.fighter-card:hover .officer-energy-plasma .plasma-7{animation:officerPlasmaLick 1.76s ease-in-out infinite 750ms}
  .officer-card.fighter-card:hover .officer-energy-plasma .plasma-8{animation:officerPlasmaLick 2.03s ease-in-out infinite 510ms}

  /* A slightly warmer pulse underneath the sharper electric arcs, matching
     the reference's dense energy core while preserving CES yellow. */
  .officer-card.fighter-card:hover{
    box-shadow:
      0 27px 64px rgba(0,0,0,.50),
      0 0 0 1px rgba(255,225,69,.42),
      0 0 16px rgba(255,215,44,.25),
      0 0 34px rgba(255,170,0,.17),
      0 0 58px rgba(255,137,0,.08);
  }
}

.officer-card.fighter-card:focus-visible .officer-energy-plasma{opacity:.88}
.officer-card.fighter-card:focus-visible .officer-energy-plasma::before,
.officer-card.fighter-card:focus-visible .officer-energy-plasma::after{opacity:.76}

@media(prefers-reduced-motion:reduce){
  .officer-energy-plasma,.officer-energy-plasma::before,.officer-energy-plasma::after,.officer-energy-plasma b{animation:none!important}
}


/* V1.6.0 portrait cleanup + officer year level */
.officer-fighter-initials[hidden]{display:none!important}
.officer-card-year{margin-top:6px;color:#e8c526;font-size:8px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}

/* ========================================================================== */
/* V1.6.4 Project and Engagement Committee layout                             */
/* Isolated Current Officers addition. Membership and Media stay unchanged.   */
/* ========================================================================== */
.officer-tier-block.tier-committees .position-project-and-engagement-committee{
  grid-column:1 / -1;
}
.officer-tier-block.tier-committees .position-project-and-engagement-committee .officer-cards{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:1120px){
  .officer-tier-block.tier-committees .position-project-and-engagement-committee .officer-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:470px){
  .officer-tier-block.tier-committees .position-project-and-engagement-committee .officer-cards{
    grid-template-columns:1fr;
  }
}



/* ========================================================================== */
/* V1.6.5 Videographer roles + Assistant Graphic Designer layout              */
/* Current Officers hierarchy only. Registration and attendance are untouched. */
/* ========================================================================== */

/* Four Functional Leads render as a balanced 2 x 2 desktop grid. */
.officer-tier-block.tier-functional-leads{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Multi-slot Assistant Officer roles, including the 3-slot Assistant Graphic
   Designer role, use the full group width instead of being trapped in one
   narrow role column. This keeps all three fighter cards on one desktop row. */
.officer-tier-block.tier-assistant-officers .officer-position-block.multi-slot{
  grid-column:1 / -1;
}
.officer-tier-block.tier-assistant-officers .officer-position-block.multi-slot .officer-cards{
  grid-template-columns:repeat(3,minmax(0,220px));
  justify-content:center;
}

@media(max-width:900px){
  .officer-tier-block.tier-assistant-officers .officer-position-block.multi-slot .officer-cards{
    grid-template-columns:repeat(2,minmax(0,210px));
  }
}
@media(max-width:720px){
  .officer-tier-block.tier-functional-leads{
    grid-template-columns:1fr;
  }
}
@media(max-width:560px){
  .officer-tier-block.tier-assistant-officers .officer-position-block.multi-slot .officer-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:stretch;
  }
}
@media(max-width:390px){
  .officer-tier-block.tier-assistant-officers .officer-position-block.multi-slot .officer-cards{
    grid-template-columns:1fr;
  }
}

/* ========================================================================== */
/* V1.6.6 Current Officers alignment patch                                    */
/* Layout-only overrides. No officer data, admin, index, or attendance logic. */
/* ========================================================================== */

/* Desktop Assistant Officers: keep the seven single-slot assistant roles in
   a compact 4 + 3 arrangement. Dense placement lets Assistant Videographer
   fill the remaining space before the full-width multi-slot role. */
@media (min-width:960px){
  .officer-tier-block.tier-assistant-officers{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-flow:row dense;
  }

  /* Assistant Graphic Designer follows the same full-width, four-across
     treatment as Project and Engagement Committee. */
  .officer-tier-block.tier-assistant-officers .officer-position-block.multi-slot{
    grid-column:1 / -1;
  }
  .officer-tier-block.tier-assistant-officers .officer-position-block.multi-slot .officer-cards{
    grid-template-columns:repeat(4,minmax(0,1fr));
    justify-content:stretch;
  }

  /* Three distinct Year Representative positions share one horizontal row
     while retaining their own individual position containers. */
  .officer-tier-block.tier-year-representatives{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Mid-size screens keep the existing responsive behavior without affecting
   the desktop alignment above. */
@media (min-width:721px) and (max-width:959px){
  .officer-tier-block.tier-assistant-officers{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:row dense;
  }
  .officer-tier-block.tier-year-representatives{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .officer-tier-block.tier-assistant-officers .officer-position-block.multi-slot{
    grid-column:1 / -1;
  }
  .officer-tier-block.tier-assistant-officers .officer-position-block.multi-slot .officer-cards{
    grid-template-columns:repeat(2,minmax(0,210px));
    justify-content:center;
  }
}