/* ============================================================
   polish.css — art-direction layer. Loaded after style.css; nothing there is removed.
   Idea: the guild's name is a blade. One cut through the wordmark, echoed by the
   notched cards. Colour fades from grey (member) to violet (officer) to full gold (leader).
   ============================================================ */
:root{
  --num:"Big Shoulders Display","Bahnschrift","Segoe UI","Noto Sans",Arial,sans-serif;
  --steel:#cfc9dc; --ember:#f0c65f;
  --notch:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
::selection{background:var(--gold);color:#120d05}

/* ---------- type: condensed numerals and labels (ASCII only; guild glyphs keep the system stack) ---------- */
.card__stats b,.stats dd,.hero__id b,.foot__id{font-family:var(--num);font-weight:800;letter-spacing:.04em}
.card__stats b{font-size:1.45rem;line-height:1.05;color:var(--bone)}
.card__stats b.is-missing{font-size:1rem;font-family:var(--body);letter-spacing:0}
.stats dd{font-size:2rem;line-height:1}
.hero__id b{font-size:1.5em;color:var(--gold)}
.role,.group__title,.cta,.nav__link,.card__stats small,.stats dt{font-family:var(--num)}
.role{font-size:.85rem;letter-spacing:.24em}
.group__title{font-size:1.05rem;letter-spacing:.26em}
.cta{font-size:1.1rem;letter-spacing:.2em}
.nav__link{font-size:1.05rem}
.mname{text-wrap:balance}

/* ---------- hero: the wordmark is cut once, on load, and stays cut ---------- */
.hero .wordmark{position:relative;display:block;color:transparent;text-shadow:none;
  filter:drop-shadow(0 0 46px rgba(122,69,230,.5)) drop-shadow(0 3px 0 #000)}
.hero .wordmark::before,.hero .wordmark::after{content:attr(data-text);position:absolute;inset:0;color:var(--bone);
  overflow-wrap:anywhere;pointer-events:none}
.hero .wordmark::before{clip-path:polygon(0 0,100% 0,100% 36%,0 64%);transform:translateX(-.7%)}
.hero .wordmark::after{clip-path:polygon(0 64%,100% 36%,100% 100%,0 100%);transform:translateX(.7%);
  background:linear-gradient(180deg,var(--bone) 40%,#b9aee0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.js .hero .wordmark::before{animation:cutTop 1.1s var(--ease) .45s both}
.js .hero .wordmark::after{animation:cutBot 1.1s var(--ease) .45s both}
@keyframes cutTop{from{transform:translate(-9%,0)}}
@keyframes cutBot{from{transform:translate(9%,0)}}
.hero__id{padding-left:16px;border-left:2px solid var(--gold);color:var(--steel)}
.hero__slash{height:3px;box-shadow:0 0 18px rgba(224,179,74,.55)}
.hero__light{background:
  radial-gradient(60% 55% at 78% 30%,rgba(122,69,230,.42),transparent 70%),
  radial-gradient(40% 35% at 18% 85%,rgba(224,179,74,.10),transparent 70%),
  radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.88) 100%)}
.hero__img{filter:saturate(.9) contrast(1.18) brightness(.92)}

/* ---------- roster: ledger head, diagonal hatch, counted group titles ---------- */
.roster{background:
  radial-gradient(50% 30% at 85% 0,rgba(122,69,230,.16),transparent 70%),
  repeating-linear-gradient(-6deg,transparent 0 46px,rgba(224,179,74,.025) 46px 47px)}
.roster__head h2{max-width:16ch;text-wrap:balance}
.roster__head p{color:var(--steel)}
.roster__head p b{font:800 1.25em var(--num);letter-spacing:.04em;color:var(--gold)}
.group__title .count{font:800 1rem var(--num);letter-spacing:.1em;color:var(--void);background:var(--mute);padding:1px 9px 0;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.group--leader .group__title .count{background:var(--gold)}
.group--officer .group__title{color:var(--violet)}
.group--officer .group__title .count{background:var(--violet);color:#fff}
.group__title i{background:linear-gradient(90deg,currentColor,transparent);opacity:.45}

/* ---------- cards: notched on two corners; colour shows rank ---------- */
.card{clip-path:var(--notch)}
.card__img img{filter:contrast(1.08) brightness(.9);transition:transform .6s var(--ease),filter .5s}
.card--officer .card__img img{filter:contrast(1.08)}
.card--leader .card__img img{filter:contrast(1.06) saturate(1.1)}
.card:hover .card__img img,.card:focus-visible .card__img img{filter:none}
.card--member:hover{box-shadow:inset 0 0 0 1px var(--steel)}
.card--officer{background:linear-gradient(180deg,#201a38,var(--char))}
.card--leader::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(112deg,transparent 58%,rgba(224,179,74,.10) 58.2%,rgba(224,179,74,.10) 66%,transparent 66.2%)}
.card__stats{border-bottom:0;padding-bottom:10px}
.meter{display:block;position:relative;height:4px;margin:-6px 0 2px;background:var(--line);
  clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.meter i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 1%);background:linear-gradient(90deg,var(--violet),var(--gold))}
.js .meter i{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .35s}
.js .card.in .meter i,.js .modal.is-open .meter i{transform:none}
.card--leader .card__stats b{font-size:2rem}
.card--leader .mname{font-size:clamp(2rem,4vw,2.8rem)}

/* ---------- profile: portrait under a scanline, bigger readout ---------- */
.modal__panel{clip-path:var(--notch)}
.modal__portrait{position:relative}
.modal__portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),linear-gradient(90deg,transparent 70%,rgba(7,5,12,.85))}
.modal .mname{font-size:clamp(2rem,4.6vw,2.9rem)}
.modal__info .meter{height:5px;margin:2px 0 0}
.rel{font-size:.8rem;color:var(--mute);margin-top:-8px}
.modal[data-role=leader] .rel{color:var(--gold)}

/* ---------- footer: one gold cut ---------- */
.foot{position:relative;border-top:0}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--gold),var(--line) 40%,transparent)}

@media (max-width:720px){
  .hero .wordmark::before{clip-path:polygon(0 0,100% 0,100% 38%,0 62%)}
  .hero .wordmark::after{clip-path:polygon(0 62%,100% 38%,100% 100%,0 100%)}
  .card--leader::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .hero .wordmark::before,.js .hero .wordmark::after{animation:none!important}
  .js .meter i{transform:none}
}

/* ============================================================
   FX layer (fx.js): embers, parallax, fog, drawn slashes, card light
   ============================================================ */
.hero{position:relative;overflow:hidden}
.hero__img{translate:calc(var(--px,0) * -16px) calc(var(--py,0) * -10px + var(--hs,0) * 70px);will-change:translate}
.hero__light{translate:calc(var(--px,0) * 10px) calc(var(--hs,0) * 30px)}
.fx-embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;mix-blend-mode:screen}
.hero__slash{background:linear-gradient(90deg,transparent 42%,#fff8dc 50%,transparent 58%) 160% 0/300% 100% no-repeat,var(--gold);
  animation:slashSweep 6.5s linear 2.4s infinite}
@keyframes slashSweep{to{background-position:-60% 0}}

.roster{position:relative;overflow:hidden;isolation:isolate}
.roster>*:not(.fx-bg){position:relative;z-index:1}
.fx-bg{position:absolute;inset:-8% 0;z-index:0;pointer-events:none}
.fx-bg .sig{position:absolute;right:-12%;top:8%;width:min(92vw,980px);aspect-ratio:1;opacity:.07;
  background:url(assets/icons/insignia.svg) center/contain no-repeat;filter:saturate(.7) blur(.4px)}
.fx-bg .fog{position:absolute;width:70vw;height:55vh;border-radius:50%;filter:blur(70px);opacity:.5;animation:fogDrift 26s ease-in-out infinite alternate}
.fx-bg .fog--a{left:-15%;top:12%;background:radial-gradient(closest-side,rgba(122,69,230,.38),transparent)}
.fx-bg .fog--b{right:-10%;bottom:6%;background:radial-gradient(closest-side,rgba(224,179,74,.16),transparent);animation-duration:34s;animation-delay:-9s}
.fx-bg .blades{position:absolute;inset:0;opacity:.8;
  background:repeating-linear-gradient(-6deg,transparent 0 120px,rgba(224,179,74,.05) 120px 121px,transparent 121px 240px)}
@keyframes fogDrift{from{transform:translate3d(-4%,0,0) scale(1)}to{transform:translate3d(9%,-8%,0) scale(1.18)}}

.fx-cut{height:0;position:relative;z-index:2}
.fx-cut::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;rotate:-1.1deg;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--ember) 50%,var(--violet) 85%,transparent);
  box-shadow:0 0 22px rgba(224,179,74,.5);transition:transform 1.2s var(--ease)}
.fx-cut.in::before{transform:scaleX(1)}

.js .card.in{animation:wipe .85s var(--ease) both}
@keyframes wipe{from{clip-path:polygon(0 0,0 0,0 0,0 100%,0 100%,0 100%)}}
.card--leader .card__img::after{content:"";position:absolute;inset:0;pointer-events:none;background:none}
/* leader shimmer: one soft light sweep across the whole card (photo + text) */
.card--leader::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,transparent 35%,rgba(255,236,170,.18) 50%,transparent 65%) -150% 0/250% 100% no-repeat;animation:shimmer 5.5s ease-in-out 1.5s infinite}
@keyframes shimmer{60%,100%{background-position:150% 0}}
@media (max-width:720px){.fx-bg .sig{opacity:.05;right:-35%}.fx-bg .fog{filter:blur(50px)}}
@media (prefers-reduced-motion:reduce){
  .fx-bg .fog,.hero__slash,.card--leader::after,.js .card.in{animation:none!important}
  .fx-cut::before{transform:none;transition:none}.hero__img,.hero__light,.fx-bg,.fx-bg .sig,.fx-bg .blades{translate:none}
}

/* ============================================================
   Textured gray base — replaces the flat near-black background.
   Everything is drawn in CSS/SVG (no image files, works offline).
   ============================================================ */
:root{--void:#2a2b2f;--mute:#9d9aac;
  
  
  }
html,body{background-color:var(--void)}
body{background-image:
  repeating-linear-gradient(112deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px),
  var(--grit-light),var(--grit-dark),var(--clouds),
  radial-gradient(90% 60% at 50% 0,rgba(255,255,255,.05),transparent 70%);
  background-size:auto,240px 240px,180px 180px,700px 700px,100% 100%;
  background-repeat:repeat,repeat,repeat,repeat,no-repeat}
.hero__light{background:
  radial-gradient(60% 55% at 78% 30%,rgba(122,69,230,.42),transparent 70%),
  radial-gradient(40% 35% at 18% 85%,rgba(224,179,74,.10),transparent 70%),
  linear-gradient(180deg,transparent 80%,var(--void)),
  radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(16,16,20,.86) 100%)}
.card--member{box-shadow:0 10px 26px rgba(0,0,0,.35)}

/* ============================================================
   Performance pass: static texture image, no blur/blend/clip animations
   ============================================================ */
body{background-image:url(assets/images/texture.webp);background-size:384px 384px;background-repeat:repeat}
.hero .wordmark{filter:none}
.fx-bg .fog{filter:none;animation:none;opacity:1}
.fx-bg .sig{filter:none}
.fx-embers{mix-blend-mode:normal}
.js .card.in{animation:none}
@media (max-width:720px){.fx-bg .blades,.card--leader .card__img::after,.card--leader::after{display:none}}

/* ============================================================
   Wordmark: back to one clean, uncut title
   ============================================================ */
.hero .wordmark{display:block;position:static;filter:none;background:none;
  color:var(--bone);-webkit-text-fill-color:currentColor;
  text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 42px rgba(122,69,230,.5),0 0 90px rgba(122,69,230,.25)}
.hero .wordmark::before,.hero .wordmark::after{content:none!important;display:none!important;animation:none!important}

/* blank slots (photo assassin-member-placeholder.webp): dimmed until edited */
.card:has(img[src$="assassin-member-placeholder.webp"]){opacity:.82}
.card:has(img[src$="assassin-member-placeholder.webp"]) .meter{visibility:hidden}
.card:has(img[src$="assassin-member-placeholder.webp"]):hover{opacity:1}

/* ============================================================
   Phones: three member cards per row, compact leader card
   ============================================================ */
@media (max-width:720px){
  .roster{padding-inline:12px}
  .group--officer .grid,.group--member .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .card{--cut:10px}
  .card:not(.card--leader) .card__body{padding:2px 8px 10px;gap:4px;margin-top:-10px}
  .card:not(.card--leader) .role,.card:not(.card--leader) .loc,.card:not(.card--leader) .card__stats span:first-child{display:none}
  .card:not(.card--leader) .mname{font-size:.78rem;line-height:1.15;letter-spacing:0;min-height:2.3em;overflow:hidden;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .card:not(.card--leader) .card__stats{grid-template-columns:1fr 1fr;gap:4px;padding:6px 0 4px}
  .card:not(.card--leader) .card__stats small{font-size:.5rem;letter-spacing:.08em}
  .card:not(.card--leader) .card__stats b{font-size:.95rem}
  .card:not(.card--leader) .meter{margin:0}
  /* leader: a short horizontal card instead of a full-screen square */
  .card--leader{flex-direction:row}
  .card--leader .card__img{width:36%;min-height:0;aspect-ratio:1;flex:none}
  .card--leader .card__body{margin:0;padding:12px 12px 12px 4px;justify-content:center;gap:6px}
  .card--leader .mname{font-size:1.25rem}
  .card--leader .card__stats{grid-template-columns:1fr 1fr;gap:6px;padding:8px 0}
  .card--leader .card__stats span:first-child{grid-column:1/-1}
  .card--leader .card__stats b{font-size:1.15rem}
  .card--leader .loc{display:none}
}

/* ============================================================
   Straight lines: the three full-width gold lines are now perfectly horizontal
   ============================================================ */
.hero__slash{transform:none}
.js .hero__slash{animation:slashFlat 1.2s var(--ease) .5s both,slashSweep 6.5s linear 2.4s infinite}
@keyframes slashFlat{from{transform:scaleX(0)}}
.fx-cut::before{rotate:0deg}
@media (prefers-reduced-motion:reduce){.js .hero__slash{animation:none!important}}

/* hero slash line removed */
.hero__slash{display:none!important}

/* ============================================================
   Staff login + timeline (staff.js)
   ============================================================ */
.st-btn{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));z-index:60;
  font:700 .85rem var(--num);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);background:rgba(20,18,30,.82);
  border:1px solid var(--gold);padding:9px 14px;cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.st-btn:hover{background:var(--gold);color:#120d05}
.st-dlg{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:16px;background:rgba(8,7,12,.78)}
.st-dlg[hidden]{display:none}
.st-card{width:min(360px,100%);display:grid;gap:14px;padding:22px;background:var(--char);border:1px solid var(--gold);color:var(--bone);
  clip-path:var(--notch);--cut:16px}
.st-card h3{font:800 1.4rem var(--num);letter-spacing:.14em;text-transform:uppercase}
.st-card label{display:grid;gap:6px;font-size:.8rem;color:var(--steel)}
.st-card input,.tl__form input{font:inherit;color:var(--bone);background:#14121c;border:1px solid var(--line);padding:10px 12px;min-width:0}
.st-card input:focus,.tl__form input:focus{outline:2px solid var(--gold);outline-offset:1px}
.st-row{display:flex;gap:10px;justify-content:flex-end}
.st-row button,.tl__form button{font:700 .85rem var(--num);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);background:transparent;border:1px solid var(--line);padding:9px 16px;cursor:pointer}
.is-main{background:var(--gold)!important;color:#120d05!important;border-color:var(--gold)!important}
.st-row button:disabled,.tl__form button:disabled{opacity:.6;cursor:wait}
.st-err{min-height:1.1em;font-size:.82rem;color:#ff8a8a}
.tl{grid-column:1/-1;padding:18px 22px 24px;border-top:1px solid var(--line)}
.tl[hidden]{display:none}
.tl h4{font:800 1.05rem var(--num);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.tl__form{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.tl__form[hidden]{display:none}
.tl__form #tl-file{flex:1 1 200px}.tl__form #tl-cap{flex:2 1 200px}
.tl__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.tl__msg{grid-column:1/-1;color:var(--mute);font-size:.9rem}
.tl__item{margin:0;display:grid;gap:6px;align-content:start}
.tl__thumb{all:unset;cursor:zoom-in;display:block;aspect-ratio:1;overflow:hidden;background:#14121c;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.tl__thumb:focus-visible{outline:2px solid var(--gold)}
.tl__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.tl__thumb:hover img{transform:scale(1.06)}
.tl__item figcaption{display:grid;gap:2px;font-size:.74rem;color:var(--mute)}
.tl__item figcaption span{color:var(--steel);overflow-wrap:anywhere}
.tl__del{all:unset;cursor:pointer;color:#ff8a8a;font-size:.72rem;text-decoration:underline;justify-self:start}
.st-lb{position:fixed;inset:0;z-index:160;display:grid;place-items:center;background:rgba(6,5,9,.92);cursor:zoom-out;padding:12px}
.st-lb img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:720px){.tl{padding:16px 14px 20px}.tl__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* timeline: caption box, daily counter, date/time, lightbox caption */
.tl__form textarea{font:inherit;color:var(--bone);background:#14121c;border:1px solid var(--line);padding:10px 12px;min-width:0;resize:none;flex:2 1 200px}
.tl__form textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.tl__left{flex:1 0 100%;color:var(--mute);font-size:.78rem}
.tl__item figcaption span{white-space:pre-line}
.tl__item time{color:var(--mute)}
.st-lb figure{margin:0;display:grid;gap:10px;justify-items:center;max-width:100%;max-height:100%}
.st-lb img{max-height:78vh}
.st-lb figcaption{display:grid;gap:4px;text-align:center;color:var(--bone);max-width:min(90vw,640px)}
.st-lb figcaption p{margin:0;white-space:pre-line}
.st-lb figcaption time{color:var(--mute);font-size:.8rem}

/* ============================================================
   Footer: contact + copyright
   ============================================================ */
.foot{padding-bottom:max(70px,calc(env(safe-area-inset-bottom) + 60px))}
.contact{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;
  margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.contact h2{font:800 .8rem var(--num);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.contact p{margin:0;font-size:.9rem;color:var(--steel)}
.contact p b{color:var(--bone);font-weight:600}
.contact__links{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.contact__links a{display:grid;place-items:center;width:36px;height:36px;color:var(--bone);border:1px solid var(--line);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);transition:background .25s,color .25s,border-color .25s}
.contact__links a:hover,.contact__links a:focus-visible{background:var(--gold);color:#120d05;border-color:var(--gold)}
.contact__links a:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
.contact__links svg{width:18px;height:18px}
.copyright{flex:1 0 100%;margin:0;font-size:.74rem;line-height:1.55;color:var(--mute);max-width:78ch}

/* ============================================================
   Hero cover: show the whole photo, never cropped or zoomed.
   The image keeps its real 1080:630 ratio on every screen, so a
   phone shows the full picture (smaller, but complete).
   ============================================================ */
.hero{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  min-height:100vh;min-height:100svh;
  padding:calc(56px + env(safe-area-inset-top,0px)) 0 clamp(56px,9vh,96px)}
.hero__art{position:relative;inset:auto;z-index:0;flex:none;
  width:min(100%,calc((100svh - 150px) * 1080 / 630));
  aspect-ratio:1080/630;margin:0 auto;overflow:hidden}
.hero__img,.js .hero__img{position:absolute;inset:0;width:100%;right:auto;
  background:url("assets/images/assassin-free-fire-guild-cover.webp") center/contain no-repeat;
  -webkit-mask-image:none;mask-image:none;opacity:1;filter:none;
  animation:none!important;transform:none!important;translate:none!important;will-change:auto}
.hero__light,.hero__slash,.hero__art::after{display:none!important}
.hero__body{max-width:1100px;margin:clamp(22px,4vh,40px) auto 0;
  padding-inline:clamp(20px,6vw,96px)}
@media (max-width:720px){
  .hero{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .hero__art{width:100%}
  .hero__img,.js .hero__img{width:100%;right:auto;-webkit-mask-image:none;mask-image:none;opacity:1}
}
@media (max-width:720px){.hero{min-height:0}}

/* Hero v2: cover photo full-width at the very top, wordmark directly under it */
.hero{padding-top:0}
.hero__art,.hero__art{width:100%!important;max-width:none;margin:0}
.hero__sigil{display:none}
.hero__body{margin-top:clamp(18px,3.5vh,36px)}
@media (max-width:720px){.hero{padding-top:0}.hero__body{margin-top:18px}}

/* Hero v3 (PC): cover fills the whole first screen edge to edge (photo scaled to cover, slight crop at top/bottom on wide screens) */
@media (min-width:721px){
  .hero__art{height:100vh;height:100svh;aspect-ratio:auto}
  .hero__img,.js .hero__img{background-position:center 22%;background-size:cover}
}

/* Hero v4: big ASSASSIN word floats over the cover photo (chest area, above the tagline) */
.hero .wordmark{position:absolute!important;left:0;right:0;z-index:3;margin:0;text-align:center;
  top:max(calc(100svh - 330px),66svh);pointer-events:none;
  text-shadow:0 4px 0 rgba(0,0,0,.6),0 0 30px rgba(0,0,0,.85),0 0 70px rgba(122,69,230,.55)}
@media (max-width:720px){
  .hero .wordmark{top:calc(100vw * .583 * .86);font-size:clamp(2.2rem,13.5vw,4.2rem);
    text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.9),0 0 32px rgba(122,69,230,.5)}
}

/* ============================================================
   SEO additions: visually hidden text for the wordmark heading, and the intro paragraph.
   ============================================================ */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.roster__head .roster__about{max-width:62ch;line-height:1.6}

/* Footer: everything centred (logo, guild ID, contact, social icons, copyright) */
.foot{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px}
.contact{flex:0 0 auto;width:100%;flex-direction:column;justify-content:center;align-items:center;gap:14px;text-align:center}
.contact__who{text-align:center}
.contact__links{justify-content:center}
.copyright{flex:0 0 auto;margin-inline:auto;text-align:center}

/* ============================================================
   Officer shimmer: soft blue light sweep across each officer card.
   Staggered per card so they don't all flash at once.
   ============================================================ */
.card--officer::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,transparent 35%,rgba(90,170,255,.22) 50%,transparent 65%) -150% 0/250% 100% no-repeat;
  animation:shimmerBlue 5.5s ease-in-out 1s infinite}
.card--officer:nth-child(2)::after{animation-delay:1.7s}
.card--officer:nth-child(3)::after{animation-delay:2.4s}
.card--officer:nth-child(4)::after{animation-delay:3.1s}
@keyframes shimmerBlue{60%,100%{background-position:150% 0}}
.card--officer:hover{box-shadow:inset 0 0 0 1px #4da3ff,0 0 18px rgba(77,163,255,.25)}
@media (prefers-reduced-motion:reduce){.card--officer::after{animation:none!important}}

/* Facebook icon: top-left of the card photo, bottom-right of the profile popup. Solid Facebook blue so it is always clearly visible. */
.card__fb,.modal__fb{display:grid;place-items:center;border-radius:50%;color:#fff;cursor:pointer;transition:background .25s,transform .25s,box-shadow .25s}
/* popup icon: unchanged, solid Facebook blue */
.modal__fb{background:#1877f2;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 4px 12px rgba(0,0,0,.55)}
.modal__fb:hover{background:#3b8cf5;transform:scale(1.1)}
/* card icon: transparent, white F; blue appears only on hover (desktop) or while pressed (phone) */
.card__fb{background:transparent;box-shadow:none}
.card__fb svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.9))}
.card__fb:active{background:#1877f2;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 4px 12px rgba(0,0,0,.55);transform:scale(1.1)}
@media (hover:hover){.card__fb:hover{background:#1877f2;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 4px 12px rgba(0,0,0,.55);transform:scale(1.1)}}
.card__fb[hidden],.modal__fb[hidden]{display:none}
.card__fb{position:absolute;top:9px;left:9px;z-index:5;width:28px;height:28px}
.card__fb svg{width:16px;height:16px;display:block}
.modal__info{position:relative}
.modal__fb{position:absolute;right:18px;bottom:18px;z-index:5;width:38px;height:38px}
.modal__fb svg{width:21px;height:21px;display:block}
@media (max-width:720px){.card__fb{top:6px;left:6px;width:24px;height:24px}.card__fb svg{width:14px;height:14px}}


/* ---------- Mobile: no sideways wobble, no zoom ---------- */
html{overflow-x:hidden;max-width:100%;touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;touch-action:pan-x pan-y}
.fx-bg,.roster,.hero{overflow-x:clip}
input,textarea,select{font-size:16px}   /* below 16px, iPhones zoom in when a field is tapped */