/* v7: category glow tokens, contrast, layout, Orders chapter board, wordmark.
   Category colors apply to elements only (tiles, pills, tags, chips, nav/menu/link buttons,
   borders, glows). Page and section backgrounds stay as they were. */

@font-face{
  font-family:"Metamorphous";
  src:url("/fonts/Metamorphous-Regular.ttf") format("truetype");
  font-style:normal;font-weight:400;font-display:swap;
}

:root{
  --c-bosses:#FF2030;--c-bosses-rgb:255,32,48;
  --c-orders:#4DC8FF;--c-orders-rgb:77,200,255;
  --c-weapons:#FFD24A;--c-weapons-rgb:255,210,74;
  --c-loot:#3DFF6E;--c-loot-rgb:61,255,110;
  --c-secrets:#FF7A18;--c-secrets-rgb:255,122,24;
  --c-fob:#C5CDD8;--c-fob-rgb:197,205,216;
  --c-areas:#FFE14A;--c-areas-rgb:255,225,74;
  --c-tips:#FF2DA8;--c-tips-rgb:255,45,168;
  --c-brand:#4DC8FF;--c-brand-rgb:77,200,255;
  --mk-glow:var(--c-brand-rgb);
  --text:#fff;
  --muted:#fff;
  /* Aliases so existing class names pick up the new tokens */
  --c-drops:var(--c-bosses);--c-drops-rgb:var(--c-bosses-rgb);
  --c-items:var(--c-loot);--c-items-rgb:var(--c-loot-rgb);
  --c-secret:var(--c-secrets);--c-secret-rgb:var(--c-secrets-rgb);
}

/* Exact boss-tile glow, parameterized. One formula, used identically everywhere. */
@keyframes mkGlowPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(var(--mk-glow),.4),0 0 18px -6px rgba(var(--mk-glow),.7),inset 0 0 14px -8px rgba(var(--mk-glow),.35)}
  50%{box-shadow:0 0 0 2px rgba(var(--mk-glow),.95),0 0 34px -2px rgba(var(--mk-glow),1),inset 0 0 22px -6px rgba(var(--mk-glow),.7)}
}
.mk-glow{
  border:1px solid rgba(var(--mk-glow),.75);
  box-shadow:0 0 0 1px rgba(var(--mk-glow),.45),0 0 22px -4px rgba(var(--mk-glow),.85),inset 0 0 18px -8px rgba(var(--mk-glow),.5);
}
.mk-glow--pulse{
  animation:mkGlowPulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .mk-glow--pulse{animation:none}
}

/* Per-category token assignment — same variable, every referring element */
.nav-neon.nav--drops,.sbtn--drops,.pill--boss,.chip-frame,.home-boss,
.tile--drops,.band--bosses .chip-frame,.info-panel--boss,
[data-section=drops] .boss-card,.bb-card,.rank--commander,.rank--lieutenant{
  --mk-glow:var(--c-bosses-rgb);--pc:var(--c-bosses);--pc-rgb:var(--c-bosses-rgb);
}
.nav-neon.nav--orders,.sbtn--orders,.pill--order,.tile--orders,.band--orders .chapter-card,
.chapter-tab,.ocol,.info-panel--order,.home-latest__link--orders{
  --mk-glow:var(--c-orders-rgb);--pc:var(--c-orders);--pc-rgb:var(--c-orders-rgb);
}
.home-latest__link--bosses{
  --mk-glow:var(--c-bosses-rgb);--pc:var(--c-bosses);--pc-rgb:var(--c-bosses-rgb);
}
.nav-neon.nav--weapons,.sbtn--weapons,.pill--weapon,.tile--weapons,.weapon-tile,
.fchip,.home-latest__link--weapons{
  --mk-glow:var(--c-weapons-rgb);--pc:var(--c-weapons);--pc-rgb:var(--c-weapons-rgb);
}
.nav-neon.nav--items,.sbtn--items,.pill--key,.pill--item,.pill--drop,.tile--items,
.home-rail__keys .pill,.home-latest__link--loot{
  --mk-glow:var(--c-loot-rgb);--pc:var(--c-loot);--pc-rgb:var(--c-loot-rgb);
}
.nav-neon.nav--secret,.nav-neon.nav--secrets,.sbtn--secret,.pill--secret,.tile--secret,
.secrets-home .tile,.band--secrets .tile{
  --mk-glow:var(--c-secrets-rgb);--pc:var(--c-secrets);--pc-rgb:var(--c-secrets-rgb);
}
.nav-neon.nav--fob,.sbtn--fob,.pill--fob,.tile--fob{
  --mk-glow:var(--c-fob-rgb);--pc:var(--c-fob);--pc-rgb:var(--c-fob-rgb);
}
.nav-neon.nav--areas,.sbtn--areas,.pill--area,.tile--areas,.home-latest__link--areas,
.mini-tile--area{
  --mk-glow:var(--c-areas-rgb);--pc:var(--c-areas);--pc-rgb:var(--c-areas-rgb);
}
.nav-neon.nav--tips,.sbtn--tips,.pill--tips,.tile--tips,.thin-tile,
.band--tips .thin-tile,.band--etiquette .thin-tile,.home-latest__link--tips{
  --mk-glow:var(--c-tips-rgb);--pc:var(--c-tips);--pc-rgb:var(--c-tips-rgb);
}

/* Apply the glow formula to all those elements (pills, tiles, buttons, chips, tags, refs) */
.nav-neon,
.sbtn,
.pill--boss,.pill--order,.pill--weapon,.pill--key,.pill--item,.pill--drop,.pill--secret,.pill--fob,.pill--area,.pill--tips,
.chip-frame,
.home-boss,
.tile--drops,.tile--orders,.tile--weapons,.tile--items,.tile--secret,.tile--fob,.tile--areas,.tile--tips,
.thin-tile,
.chapter-card,
.chapter-tab,
.weapon-tile,
.boss-card,
.bb-card,
.home-latest__link--orders,.home-latest__link--loot,.home-latest__link--areas,.home-latest__link--tips,.home-latest__link--bosses,
.home-rail__keys .pill{
  border-color:rgba(var(--mk-glow),.75);
  box-shadow:0 0 0 1px rgba(var(--mk-glow),.45),0 0 22px -4px rgba(var(--mk-glow),.85),inset 0 0 18px -8px rgba(var(--mk-glow),.5);
}
/* Pulse only on larger frames (boss tiles, chapter card, weapon/secret tiles) — not every pill */
.chip-frame,
.chapter-card,
.tile--drops,.tile--secret,
.boss-card{
  animation:mkGlowPulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .chip-frame,.chapter-card,.tile--drops,.tile--secret,.boss-card{animation:none}
}

/* Pills: compact, white type, category glow. Drop items are loot (green), not boss red. */
.pill{
  color:#fff;
  background:rgba(var(--mk-glow,var(--c-brand-rgb)),.14);
}
.pill--drop{--mk-glow:var(--c-loot-rgb);--pc:var(--c-loot);--pc-rgb:var(--c-loot-rgb);color:#fff}

/* Do not wash whole section/page backgrounds with category color */
.band--drops::before,
.band--bosses::before,
.band--secrets::before,
.band--orders::before,
.band--tips::before{background:none!important}
.band--secrets,
.band--bosses,
.band--orders{background:transparent}

/* Body / gray text → pure white */
body,p,li,td,th,.intro,.lede,.info-val,.info-lab,.tile-body p,.thin-tile p,.thin-tile h3,
.home-latest__link,.home-rail__lab,.home-boss__name,.ocol-task,.ocol-chapter,
.weapon-board__count,.weapon-filter__lab,.muted,.caption,figcaption,.hero-main__cap,
.site-attribution,.footer-links a,.breadcrumbs,.toc a,.steps p{
  color:#fff;
}
.kicker,.tile-kicker,.bb-kicker{color:#fff}

/* Section titles: large glowing brand neon blue. Kickers under titles removed in CSS
   (HTML also drops the subtitle lines). */
.band-head .kicker,
.section-head .kicker{display:none}
.band-head,.section-head{margin:0 0 16px;align-items:flex-end;gap:10px}
.band-head h2,.section-head h2,
.band--thin .band-head h2,.band-head h2{
  margin:0;
  font-size:clamp(1.7rem,1.2rem + 2.2vw,2.55rem);
  line-height:1.1;
  font-weight:750;
  letter-spacing:.04em;
  color:var(--c-brand);
  text-shadow:0 0 8px rgba(var(--c-brand-rgb),.95),0 0 22px rgba(var(--c-brand-rgb),.75),0 0 42px rgba(var(--c-brand-rgb),.4);
}

/* Compact “All …” pills site-wide */
.sbtn--sm,
.band-head .sbtn,
.section-head .sbtn,
.drops-panel__more{
  height:22px;min-height:22px;max-height:24px;
  padding:0 8px;font-size:.62rem;line-height:1;
  border-radius:7px;gap:4px;
}

/* Tile uniformity within each section */
.tiles,.tiles-4,.tiles--tips,.boss-grid,.bb-grid,.secrets-grid{
  align-items:stretch;
}
.tiles .tile,.tiles-4 .tile,.tiles--tips .tile,.secrets-grid .tile,.boss-grid .boss-card,.bb-grid .bb-card{
  height:100%;
  display:flex;flex-direction:column;
  min-width:0;
}
.tiles .tile .tile-body,.tiles-4 .tile .tile-body,.tiles--tips .tile .tile-body{
  flex:1 1 auto;display:flex;flex-direction:column;
}
.tiles .tile .tile-body p,.tiles-4 .tile .tile-body p,.tiles--tips .tile .tile-body p,
.thin-tile p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  min-height:3.6em;
}
.thin-tile{min-height:76px;width:min(240px,78vw);box-sizing:border-box}

/* Gothic neon wordmark — MISSION KEY, matching the blip logo colors */
.brand .wordmark__mk,
.home-fold .brand-title__mk,
.brand-title__mk{
  font-family:"Metamorphous",serif;
  font-weight:400;
  letter-spacing:.02em;
  color:#4DC8FF;
  -webkit-text-stroke:1px #00A6FF;
  paint-order:stroke fill;
  text-shadow:0 0 6px #00A6FF,0 0 14px rgba(0,166,255,.9),0 0 28px rgba(0,166,255,.55);
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  filter:none!important;
  animation:none!important;
  text-transform:none;
}
.brand .wordmark__mk{font-size:1.15rem;line-height:1}
.home-fold .brand-title__mk,
.brand-title__mk{font-size:clamp(2rem,1.4rem + 2.8vw,3.1rem);line-height:1}
.brand-title__guide{
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  color:#4DC8FF!important;
  filter:none!important;
  animation:none!important;
  text-shadow:0 0 8px rgba(77,200,255,.7);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:650;
}
.brand-title__guide::after{display:none!important}
@media (prefers-reduced-motion:reduce){
  .brand .wordmark__mk,.brand-title__mk{text-shadow:0 0 8px #00A6FF,0 0 16px rgba(0,166,255,.7)}
}

/* ===== Home left column fills to the hero + caption ===== */
.home-split{
  display:grid;
  grid-template-columns:minmax(160px,1fr) minmax(320px,2.2fr) minmax(180px,1fr);
  grid-template-areas:"left hero rail";
  grid-template-rows:auto;
  gap:10px;
  align-items:stretch;
}
.home-left{
  grid-area:left;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:8px;min-width:0;min-height:0;height:100%;
}
.home-left .page-menu{grid-area:auto}
.home-left .home-latest{
  grid-area:auto;flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:space-between;gap:8px;
}
.home-hero{grid-area:hero}
.home-rail{
  grid-area:rail;
  display:flex;flex-direction:column;justify-content:space-between;
  height:100%;min-width:0;
}
.home-side{display:contents}

/* ===== Mobile: no page-level horizontal scroll; swipe only inside nav / chapter tabs ===== */
html,body{max-width:100%;overflow-x:hidden}
/* v7a: global height:auto and full-bleed wrap moved to the v7a block at the end */

@media (max-width:719px){
  .nav-span{
    justify-content:flex-start;
    gap:8px;
    overflow-x:auto;overflow-y:hidden;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    padding-bottom:8px;
    max-width:100%;
  }
  .nav-neon{
    flex:0 0 auto;
    min-width:92px;
    height:36px;min-height:36px;max-height:36px;
    padding:0 14px;
    font-size:.75rem;
    letter-spacing:.02em;
  }
}
@media (max-width:719px) and (orientation:portrait){
  .home-split{
    grid-template-columns:minmax(108px,.95fr) minmax(0,1.7fr);
    grid-template-rows:auto;
    grid-template-areas:
      "left hero"
      "rail rail";
    gap:6px;align-items:stretch;
  }
  .home-left{height:100%}
  .home-hero{width:100%;max-width:100%}
  .page-menu{grid-template-columns:1fr 1fr;gap:3px}
  .page-menu .sbtn,.home-split .page-menu .sbtn,.home-left .page-menu .sbtn{
    height:18px;min-height:18px;max-height:18px;
    padding:0 4px;font-size:.52rem;gap:2px;border-radius:5px;
  }
  .page-menu .sbtn svg,.home-left .page-menu .sbtn svg{width:9px;height:9px}
  .page-menu .lab-long{display:none}
  .page-menu .lab-short{display:inline}
  .home-rail__lab,.home-latest__link,.home-boss__name{font-size:.55rem}
  .home-latest__link,.home-boss{min-height:18px;padding:1px 5px}
  .home-fold .brand-title__mk{font-size:1.45rem}
}

/* Short landscape: keep three columns, no page overflow */
@media (max-height:500px){
  .home-split{
    grid-template-columns:minmax(120px,1fr) minmax(160px,auto) minmax(160px,1fr);
    grid-template-areas:"left hero rail";
  }
}

/* ===== Orders chapter board ===== */
.order-chapters{display:flex;flex-direction:column;gap:12px;min-width:0}
.chapter-tabs{
  display:flex;gap:8px;flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  max-width:100%;padding:2px 0 8px;
}
.chapter-tab{
  flex:0 0 auto;
  height:32px;padding:0 14px;
  border-radius:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:#fff;background:rgba(var(--c-orders-rgb),.14);
  cursor:pointer;
  white-space:nowrap;
}
.chapter-tab.is-active,
.chapter-tab[aria-selected="true"]{
  background:rgba(var(--c-orders-rgb),.28);
  box-shadow:0 0 0 1px rgba(var(--c-orders-rgb),.7),0 0 22px -4px rgba(var(--c-orders-rgb),.95),inset 0 0 18px -8px rgba(var(--c-orders-rgb),.5);
}
.chapter-panel{min-width:0}
.chapter-card{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr);
  gap:16px;
  padding:14px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(12,16,26,.96),rgba(8,10,16,.98));
  --mk-glow:var(--c-orders-rgb);
  min-width:0;
}
.chapter-card__shot{
  margin:0;padding:0;border:0;background:#05070b;border-radius:12px;overflow:hidden;
  cursor:zoom-in;align-self:stretch;min-width:0;
}
.chapter-card__shot img{width:100%;height:100%;object-fit:contain;display:block;background:#05070b}
.chapter-card__body{min-width:0;display:flex;flex-direction:column;gap:12px}
.chapter-card__label{
  margin:0;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--c-orders);text-shadow:0 0 10px rgba(var(--c-orders-rgb),.7);
}
.chapter-rewards .info-lab{margin:0 0 6px}
.chapter-orders{display:flex;flex-direction:column;gap:12px}
.chapter-order{
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(var(--c-orders-rgb),.4);
  background:rgba(var(--c-orders-rgb),.06);
}
.chapter-order h3{margin:0 0 6px;font-size:1rem;color:#fff}
.chapter-order ol{margin:0 0 8px;padding-left:1.2em;color:#fff}
.chapter-order .cta{color:var(--c-orders);font-weight:650}
.order-step{margin:0 0 4px;border:1px solid rgba(var(--c-orders-rgb),.28);border-radius:8px;background:rgba(5,7,11,.4)}
.order-step summary{
  cursor:pointer;padding:6px 10px;font-weight:650;color:#fff;list-style:none;
}
.order-step summary::-webkit-details-marker{display:none}
.order-step summary::after{content:"▸";float:right;color:var(--c-orders)}
.order-step[open] summary::after{content:"▾"}
.order-step p{margin:0;padding:0 10px 8px;color:#fff;font-size:.88rem}
@media (max-width:719px){
  .chapter-card{grid-template-columns:1fr;padding:10px}
  .chapter-tab{height:34px;padding:0 12px;font-size:.68rem}
}

/* Hide the old 15-column board if any leftover markup remains */
.ocol-board{overflow-x:auto;max-width:100%}

/* Boss pages: same main-photo frame as Knuckle / The Wrench (4:3 contain, no overlay text) */
[data-section="drops"] .hero-stage,
[data-section="drops"] .hero-main{
  aspect-ratio:4/3;
  width:100%;max-width:min(520px,100%);
  background:#05070b;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(var(--c-bosses-rgb),.75);
  box-shadow:0 0 0 1px rgba(var(--c-bosses-rgb),.45),0 0 22px -4px rgba(var(--c-bosses-rgb),.85),inset 0 0 18px -8px rgba(var(--c-bosses-rgb),.5);
  animation:mkGlowPulse 1.8s ease-in-out infinite;
}
[data-section="drops"] .hero-main img,
[data-section="drops"] .hero-stage img,
[data-section="drops"] .hero-main__img{
  width:100%;height:100%;object-fit:contain;object-position:center;background:#05070b;display:block;
}
[data-section="drops"] .task-header h1,
[data-section="drops"] .page-head h1{
  color:var(--c-brand);
  text-shadow:0 0 10px rgba(var(--c-brand-rgb),.7);
}
[data-section="drops"] .task-header h1 + p,
[data-section="drops"] .rank,
[data-section="drops"] .pill--boss{
  color:#fff;
}
@media (prefers-reduced-motion:reduce){
  [data-section="drops"] .hero-stage,
  [data-section="drops"] .hero-main{animation:none}
}

/* Boss section titles stay brand blue (not red). Rank / name / referring pills stay red. */
.band--bosses .band-head h2{color:var(--c-brand);text-shadow:0 0 8px rgba(var(--c-brand-rgb),.95),0 0 22px rgba(var(--c-brand-rgb),.75)}

.home-latest__link--bosses{--mk-glow:var(--c-bosses-rgb);--pc:var(--c-bosses);--pc-rgb:var(--c-bosses-rgb)}

/* Category tokens must win everywhere a referring pill/button appears */
[data-section] .pill--order,.pill--order{--mk-glow:var(--c-orders-rgb)!important;--pc:var(--c-orders);--pc-rgb:var(--c-orders-rgb)}
[data-section] .pill--area,.pill--area{--mk-glow:var(--c-areas-rgb)!important;--pc:var(--c-areas);--pc-rgb:var(--c-areas-rgb)}
[data-section] .pill--boss,.pill--boss{--mk-glow:var(--c-bosses-rgb)!important;--pc:var(--c-bosses);--pc-rgb:var(--c-bosses-rgb)}
[data-section] .pill--key,.pill--item,.pill--drop{--mk-glow:var(--c-loot-rgb)!important;--pc:var(--c-loot);--pc-rgb:var(--c-loot-rgb)}
[data-section] .sbtn--orders,.band--orders .sbtn--orders,.chapter-tab{
  --mk-glow:var(--c-orders-rgb)!important;--pc:var(--c-orders);--pc-rgb:var(--c-orders-rgb);
}
.sbtn--exfil{--mk-glow:42,210,255}

/* Chapter board photo sits at natural ratio, not stretched to the tall tile */
.chapter-card__shot{align-self:start;width:100%;height:auto;background:#05070b}
.chapter-card__shot img{width:100%;height:auto!important;object-fit:contain;display:block}

/* Latest packed at top; At a glance pins to the bottom of the left column */
/* v7a: left-column packing is in the v7a block at the end */

/* Boss main photo: same red glow token as the boss tiles */
[data-section="drops"] .task-hero .hero-stage,
[data-section="drops"] .task-hero .hero-main,
[data-section="drops"] .hero-stage,
[data-section="drops"] .hero-main{
  border:1px solid rgba(var(--c-bosses-rgb),.75)!important;
  box-shadow:0 0 0 1px rgba(var(--c-bosses-rgb),.45),0 0 22px -4px rgba(var(--c-bosses-rgb),.85),inset 0 0 18px -8px rgba(var(--c-bosses-rgb),.5)!important;
}

/* Wordmark: drop the heavy stroke that made MISSION look like MGGION at nav size */
.brand .wordmark__mk{
  -webkit-text-stroke:0.4px #00A6FF;
  letter-spacing:.04em;
  font-size:1.28rem;
}
.home-fold .brand-title__mk,.brand-title__mk{
  -webkit-text-stroke:1px #00A6FF;
  letter-spacing:.06em;
}


/* ===== v7a ============================================================
   Gutters, locked 4:3 boss tiles, even info columns, packed left column,
   Metamorphous wordmark (legible, slight gothic twist; S is not a G).
   ==================================================================== */

/* Restore container gutters at every width. Keep v6 vertical padding;
   only re-assert inline padding and the v5 max-width caps. */
.wrap{
  max-width:1320px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  padding-left:20px;
  padding-right:20px;
}
.wrap.home-fold,
.wrap.header-mast,
.site-header--v6 .wrap.header-mast,
.wrap.nav-span,
nav.wrap,
.band.wrap,
section.wrap{
  padding-left:20px;
  padding-right:20px;
}
@media (min-width:768px){
  .wrap,
  .wrap.home-fold,
  .wrap.header-mast,
  .site-header--v6 .wrap.header-mast,
  .wrap.nav-span,
  nav.wrap,
  .band.wrap,
  section.wrap{
    padding-left:32px;
    padding-right:32px;
  }
}
@media (min-width:1700px){
  .wrap{max-width:1560px}
}
@media (min-width:2200px){
  .wrap{max-width:1800px}
}
@media (max-width:719px){
  .wrap,
  .wrap.home-fold,
  .wrap.header-mast,
  .site-header--v6 .wrap.header-mast,
  .wrap.nav-span,
  nav.wrap,
  .band.wrap,
  section.wrap{
    padding-left:16px;
    padding-right:16px;
  }
}

/* Do not let a global height:auto blow 4:3 frames or SVG icon sizes.
   Images still cannot overflow their boxes. */
img,video,canvas{max-width:100%}
svg{max-width:100%}

/* Boss tiles: lock the photo to 4:3. The img is out of flow so a tall
   portrait cannot stretch the frame; object-fit:contain keeps the still
   unsliced. Tracks start-align so a short tile is not stretched. */
.chip-track{align-items:flex-start;min-width:0}
.chip-tile{align-self:flex-start;height:auto}
.chip-frame{display:flex;flex-direction:column;height:auto;min-height:0}
.chip-media{
  position:relative;
  inset:auto;
  flex:none;
  width:100%;
  aspect-ratio:4/3;
  height:auto;
  overflow:hidden;
  background:#05070b;
}
.chip-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#05070b;
}

/* Info panel: even two columns, title on its own row, drops full-width.
   The outer wrapper is a div so key and drop links are valid. */
.info-panel__link{display:flex;flex-direction:column;gap:6px;width:100%;min-width:0}
.info-panel__link > h3{margin:0}
.info-panel__link > h3 a{color:inherit;text-decoration:none}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;width:100%;min-width:0;align-items:start}
.info-col{min-width:0}
.info-drops{width:100%}

/* Home left: pack Latest directly above At a glance; leftover height
   holds Exfil types and Chapter 1 orders from existing site data. */
.home-left{
  justify-content:flex-start;
  gap:8px;
}
.home-left .home-latest{
  flex:0 0 auto;
  justify-content:flex-start;
  gap:8px;
}
.home-glance{margin-top:0}
.home-fill{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
  min-height:0;
}
.home-fill .home-rail__lab{margin:2px 0 0}
.home-fill__pills{display:flex;flex-wrap:wrap;gap:4px}
.home-fill .pill{font-size:.62rem;padding:2px 7px}

/* Wordmark: Metamorphous stays neon-blue like the blip; slightly open
   tracking so every letter stays clear at nav size. */
.brand .wordmark__mk,
.home-fold .brand-title__mk,
.brand-title__mk{
  font-family:"Metamorphous",serif;
  font-weight:400;
  color:#4DC8FF;
  -webkit-text-stroke:1px #00A6FF;
  paint-order:stroke fill;
  text-shadow:0 0 6px #00A6FF,0 0 14px rgba(0,166,255,.9),0 0 28px rgba(0,166,255,.55);
}
.brand .wordmark__mk{
  -webkit-text-stroke:0.5px #00A6FF;
  letter-spacing:.06em;
  font-size:1.22rem;
}
.home-fold .brand-title__mk,
.brand-title__mk{
  -webkit-text-stroke:1px #00A6FF;
  letter-spacing:.06em;
}


/* ===== v7b: snug article/detail pages, no dead space beside the gallery.
   Meta cards become a compact pill row. Thumbnail captions stay short,
   under the thumbs, never over images. TOC column is unchanged. ===== */

/* Compact Type / Map / Updated pills on every task-layout page */
.task-layout .facts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 8px;
  grid-template-columns:none;
}
.task-layout .facts .fact{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  margin:0;
  padding:3px 10px !important;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(var(--mk-glow, var(--c-brand-rgb)),.4);
  box-shadow:0 0 10px -4px rgba(var(--mk-glow, var(--c-brand-rgb)),.45);
  min-width:0;
}
.task-layout .facts .fact span{
  display:inline;
  font-size:.58rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  font-weight:700;
  opacity:.85;
}
.task-layout .facts .fact b{
  font-size:.82rem;
  font-weight:650;
  color:#fff;
  line-height:1.2;
}
[data-section="tips"] .task-layout .facts .fact{--mk-glow:var(--c-tips-rgb)}
[data-section="drops"] .task-layout .facts .fact{--mk-glow:var(--c-bosses-rgb)}
[data-section="items"] .task-layout .facts .fact{--mk-glow:var(--c-loot-rgb)}
[data-section="orders"] .task-layout .facts .fact{--mk-glow:var(--c-orders-rgb)}
[data-section="areas"] .task-layout .facts .fact{--mk-glow:var(--c-areas-rgb)}
[data-section="fob"] .task-layout .facts .fact{--mk-glow:var(--c-fob-rgb)}
[data-section="secrets"] .task-layout .facts .fact{--mk-glow:var(--c-secrets-rgb)}
[data-section="weapons"] .task-layout .facts .fact{--mk-glow:var(--c-weapons-rgb)}

/* Compact thumbnail strip: short captions under the thumbs */
.task-hero .thumb-strip{
  grid-template-columns:28px 1fr 28px;
  gap:4px;
  margin-top:6px;
  align-items:start;
}
.task-hero .strip-nav{
  width:28px;height:28px;padding:0;
  border-radius:6px;font-size:1rem;line-height:1;
}
.task-hero .thumb-btn{width:96px;border-radius:8px}
.task-hero .thumb-btn img{width:96px;height:54px;object-fit:cover;display:block}
.task-hero .thumb-btn__cap{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  padding:3px 5px 4px;
  font-size:.58rem;
  line-height:1.2;
  max-height:2.55em;
  color:#fff;
  white-space:normal;
}

.task-layout{padding-top:8px}
.task-layout .task-header h1{margin:4px 0 8px}
.task-layout .task-header{margin:0 0 8px}

/* Desktop: title, compact pills, and early content sit under the title
   to the left of the gallery. Later sections go full width once they
   clear the media column. Hero loops stay with the gallery. */
@media (min-width:1024px){
  .task-layout:has(> .task-hero),
  .task-layout--dense:has(> .task-hero){
    display:flow-root;
    gap:0;
    grid-template-columns:none;
  }
  .task-layout:has(> .task-hero) > .task-header{
    float:left;
    width:calc(46% - 10px);
    margin:0 0 8px;
  }
  .task-layout:has(> .task-hero) > .task-hero{
    float:right;
    width:calc(54% - 10px);
    margin:0 0 12px 20px;
  }
  .task-layout:has(> .task-hero) > .hero-loops{
    float:right;
    clear:right;
    width:calc(54% - 10px);
    margin:0 0 16px 20px;
  }
  .task-layout:has(> .task-hero) > .facts{
    /* Stack under the title in the left column, never in the gallery gutter */
    float:left;
    clear:left;
    width:calc(46% - 10px);
    margin:0 0 12px;
  }
  .task-layout:has(> .task-hero) > .task-section,
  .task-layout:has(> .task-hero) > .task-steps,
  .task-layout:has(> .task-hero) > .task-gallery,
  .task-layout:has(> .task-hero) > .task-intel,
  .task-layout:has(> .task-hero) > .task-sources,
  .task-layout:has(> .task-hero) > .task-faq{
    /* Each section is a unit: shrink beside the gallery, full width once it clears it */
    display:flow-root;
    clear:left;
    width:auto;
    margin:0 0 12px;
  }
}

/* Mobile / tablet: title, then meta pills, then gallery, then body.
   No floats, no page-level horizontal scroll. */
@media (max-width:1023px){
  .task-layout,
  .task-layout--dense{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-top:8px;
  }
  .task-layout > *{order:5;min-width:0;width:100%;max-width:100%;float:none;margin-left:0;margin-right:0}
  .task-layout > .task-header{order:1}
  .task-layout > .facts{order:2}
  .task-layout > .task-hero{order:3}
  .task-layout > .hero-loops{order:4}
}
@media (max-width:719px){
  .task-hero .thumb-strip{grid-template-columns:1fr}
  .task-hero .strip-nav{display:none}
  .task-hero .thumb-btn{width:84px}
  .task-hero .thumb-btn img{width:84px;height:48px}
}


/* ===== v7b: quiet category chrome (t146) + captionless equal thumbs (t147) =====
   Pills, nav, and buttons: dark fill, thin low-opacity category border,
   category color on icon and text only. No outer glow or pulse on those.
   Boss tiles keep a softened red pulse. Section titles and wordmark stay. */

@keyframes mkGlowPulseSoft{
  0%,100%{box-shadow:0 0 0 1px rgba(255,32,48,.25),0 0 12px -6px rgba(255,32,48,.4),inset 0 0 10px -8px rgba(255,32,48,.22)}
  50%{box-shadow:0 0 0 1px rgba(255,32,48,.5),0 0 20px -4px rgba(255,32,48,.6),inset 0 0 14px -6px rgba(255,32,48,.36)}
}

.nav-neon,
.sbtn,
.sbtn--sm,
.band-head .sbtn,
.section-head .sbtn,
.drops-panel__more,
.chapter-tab,
.pill,
.pill--boss,.pill--order,.pill--weapon,.pill--key,.pill--item,.pill--drop,
.pill--secret,.pill--fob,.pill--area,.pill--tips,.pill--type,
.home-latest__link,
.home-boss,
.home-fill .pill,
.task-layout .facts .fact,
.home-rail__keys .pill{
  background:rgba(8,10,16,.92) !important;
  border:1px solid rgba(var(--mk-glow, var(--pc-rgb, var(--c-brand-rgb))),.32) !important;
  box-shadow:none !important;
  animation:none !important;
  filter:none !important;
  color:rgb(var(--mk-glow, var(--pc-rgb, var(--c-brand-rgb)))) !important;
  text-shadow:none !important;
}
.nav-neon svg,
.sbtn svg,
.pill svg,
.home-latest__link svg,
.chapter-tab svg,
.home-boss svg{
  color:rgb(var(--mk-glow, var(--pc-rgb, var(--c-brand-rgb)))) !important;
  filter:none !important;
}
.nav-neon:hover,.nav-neon:focus-visible,.nav-neon[aria-current="page"],
.sbtn:hover,.sbtn:focus-visible,
.pill:hover,.chapter-tab:hover,.chapter-tab.is-active,
.home-latest__link:hover,.home-boss:hover{
  background:rgba(10,12,20,.96) !important;
  border-color:rgba(var(--mk-glow, var(--pc-rgb, var(--c-brand-rgb))),.55) !important;
  box-shadow:none !important;
  transform:none;
}
/* Keep type labels in fact pills slightly quieter than the value */
.task-layout .facts .fact span{color:rgb(var(--mk-glow, var(--pc-rgb, var(--c-brand-rgb)))) !important;opacity:.7}

/* Tiles and cards: thin category border, no outer glow, no pulse — except boss frames */
.tile--drops,.tile--orders,.tile--weapons,.tile--items,.tile--secret,.tile--fob,.tile--areas,.tile--tips,
.thin-tile,.chapter-card,.weapon-tile,.boss-card,.bb-card{
  box-shadow:none !important;
  animation:none !important;
  border-color:rgba(var(--mk-glow, var(--pc-rgb, var(--c-brand-rgb))),.3);
}

/* Boss tiles: keep the red pulse the user liked, but softer */
.band--bosses .chip-frame,
.chip-tile .chip-frame,
.chip-frame{
  animation:mkGlowPulseSoft 2.6s ease-in-out infinite !important;
  border-color:rgba(255,32,48,.5) !important;
  box-shadow:0 0 0 1px rgba(255,32,48,.28),0 0 14px -6px rgba(255,32,48,.5),inset 0 0 12px -8px rgba(255,32,48,.28) !important;
}
@media (prefers-reduced-motion:reduce){
  .band--bosses .chip-frame,.chip-tile .chip-frame,.chip-frame{animation:none !important}
}

/* Captionless, identical 16:9 thumbnail tiles site-wide */
.thumb-btn,
.home-hero .thumb-btn,
.task-hero .thumb-btn{
  flex:none;
  box-sizing:border-box;
  width:88px;
  height:auto;
  aspect-ratio:16/9;
  padding:0;
  margin:0;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
  background:#05070b;
  overflow:hidden;
  box-shadow:none;
}
.thumb-btn img,
.home-hero .thumb-btn img,
.task-hero .thumb-btn img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
}
.thumb-btn__cap,
.home-hero .thumb-btn__cap,
.task-hero .thumb-btn__cap{display:none !important;height:0 !important;padding:0 !important;margin:0 !important;overflow:hidden}
.thumb-btn.is-active,
.home-hero .thumb-btn.is-active,
.task-hero .thumb-btn.is-active{
  border:1px solid rgba(77,200,255,.65);
  box-shadow:none;
}
.task-hero .thumb-strip,
.home-hero .thumb-strip{
  grid-template-columns:28px 1fr 28px;
  gap:4px;
  margin-top:6px;
  align-items:center;
}
.task-hero .strip-track,
.home-hero .strip-track{gap:6px;align-items:center}
@media (max-width:719px){
  .thumb-btn,.home-hero .thumb-btn,.task-hero .thumb-btn{width:80px}
  .task-hero .thumb-strip,.home-hero .thumb-strip{grid-template-columns:1fr}
}


/* ===== v7c: snug mobile Home, extras after gallery, quieter key-rail ===== */

/* Desktop: extras (drops list, order board, objectives) stay in the left
   column under the title, beside the gallery. */
/* One left-hand column (title + extras) so the gallery can sit beside the title
   on desktop. display:contents on small screens lets flex-order put extras
   after the gallery. */
@media (min-width:1024px){
  .task-layout:has(> .task-hero) > .task-lead{
    float:left;
    width:calc(46% - 10px);
    margin:0 0 8px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .task-layout:has(> .task-hero) > .task-lead > .task-header,
  .task-layout:has(> .task-hero) > .task-lead > .task-extras{
    float:none;
    clear:none;
    width:auto;
    margin:0;
  }
  .task-layout:has(> .task-hero) > .task-lead > .task-extras{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
}

/* Mobile / tablet: title + facts + intro, then gallery, then extras, then body. */
@media (max-width:1023px){
  .task-lead{display:contents}
  .task-layout > *,
  .task-layout > .task-lead > *{order:6}
  .task-layout > .task-header,
  .task-layout > .task-lead > .task-header{order:1}
  .task-layout > .facts{order:2}
  .task-layout > .task-hero{order:3}
  .task-layout > .hero-loops{order:4}
  .task-layout > .task-extras,
  .task-layout > .task-lead > .task-extras{order:5;width:100%;max-width:100%;float:none}
}

/* Desktop Home wrappers stay a normal stacked left column. */
.home-lead,
.home-after{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.home-after{flex:1 1 auto;gap:6px}
.home-fill{flex:0 0 auto}

/* Under 720px portrait: category grid + Latest sit beside the hero;
   At a glance, Exfil types, and Chapter 1 orders go full width in two
   columns underneath, so nothing leaves a dead column under the slider. */
@media (max-width:719px) and (orientation:portrait){
  .home-split{
    display:grid;
    grid-template-columns:minmax(120px,.95fr) minmax(0,1.7fr);
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "lead hero"
      "after after"
      "rail rail";
    gap:8px;
    align-items:start;
  }
  .home-left{display:contents;height:auto}
  .home-lead{grid-area:lead;gap:6px}
  .home-hero{grid-area:hero;width:100%;max-width:100%;justify-self:stretch}
  .home-after{
    grid-area:after;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 12px;
    align-items:start;
    flex:none;
  }
  .home-rail{grid-area:rail}
  .home-latest,
  .home-glance,
  .home-fill{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
}

/* Same hue as other loot pills, lower text and border intensity on the Home key rail only. */
.home-rail__keys .pill{
  color:rgba(61,255,110,.72) !important;
  border-color:rgba(61,255,110,.22) !important;
}
.home-rail__keys .pill:hover,
.home-rail__keys .pill:focus-visible{
  color:rgba(61,255,110,.9) !important;
  border-color:rgba(61,255,110,.4) !important;
}