/* P&T LORE ? ISOLATED LAYOUT */

/* The Lore archive needs to flow vertically once THE FOUR is present. */
.world-lore-archive .signal-shell{
  display:block;
  width:min(1380px,90vw);
  height:100%;
  min-height:100%;
  margin:0 auto;
  padding:112px 0 42px;
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:hidden;
}

/* ------------------------------------------------------------
   FRAGMENT INDEX
   ------------------------------------------------------------ */

.world-lore-archive .lore-grid{
  display:grid;
  width:100%;
  height:auto;
  min-height:0;
  margin:34px 0 22px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,150px);
  gap:12px;
  flex:none;
}

.world-lore-archive .lore-grid .lore-card{
  width:100%;
  height:150px;
  min-height:150px;
  box-sizing:border-box;
  overflow:hidden;
}

.world-lore-archive .lore-grid .lore-card strong{
  display:flex;
  align-items:center;
  max-width:100%;
  height:calc(100% - 28px);
  margin:0;
  padding:8px 0 18px;
  box-sizing:border-box;
  font-size:clamp(25px,2.25vw,34px);
  line-height:.88;
  white-space:normal;
}

/* Keep metadata safely inside the fragment card. */
.world-lore-archive .lore-grid .lore-card em{
  left:20px;
  right:38px;
  bottom:16px;
  max-width:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ------------------------------------------------------------
   THE FOUR
   ------------------------------------------------------------ */

.world-lore-archive .lore-people-block{
  display:block;
  width:100%;
  max-width:none;
  margin:18px 0 30px;
  padding:26px 0 0;
  box-sizing:border-box;
  border-top:1px solid rgba(238,246,255,.10);
}

.world-lore-archive .lore-section-head{
  display:flex;
  width:100%;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  margin:0 0 18px;
}

.world-lore-archive .lore-section-head h3{
  margin:0;
  font-size:clamp(28px,3.4vw,48px);
  line-height:.9;
  letter-spacing:-.05em;
}

.world-lore-archive .lore-section-head h3 em{
  font-style:normal;
  color:#c45cff;
}

.world-lore-archive .lore-section-head>p{
  max-width:430px;
  margin:0 0 2px;
  font-size:9px;
  line-height:1.6;
  color:rgba(238,246,255,.42);
}

.world-lore-archive .lore-people-grid{
  display:grid;
  width:100%;
  max-width:none;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0;
}

.world-lore-archive .lore-people-grid .lore-person-card{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  height:150px;
  min-height:150px;
  min-width:0;
  box-sizing:border-box;
  margin:0;
  padding:16px 17px 30px;
  overflow:hidden;
}

.world-lore-archive .lore-people-grid .lore-person-card strong{
  display:flex;
  flex:1;
  align-items:center;
  width:100%;
  margin:0;
  padding:8px 0 10px;
  box-sizing:border-box;
  font-size:clamp(23px,2.3vw,34px);
  line-height:.9;
  white-space:nowrap;
}

.world-lore-archive .lore-people-grid .lore-person-card em{
  position:absolute;
  left:17px;
  right:30px;
  bottom:12px;
  margin:0;
  padding:0;
  font-style:normal;
  font-size:6px;
  line-height:1.2;
  letter-spacing:.18em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:rgba(238,246,255,.38);
}

.world-lore-archive .lore-people-grid .lore-person-card i{
  position:absolute;
  right:15px;
  bottom:10px;
  margin:0;
  font-style:normal;
  font-size:8px;
  line-height:1;
  color:#c45cff;
}

.world-lore-archive .lore-people-grid .lore-person-confirmed{
  border-color:rgba(196,92,255,.30);
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media(max-width:900px){
  .world-lore-archive .signal-shell{
    width:92vw;
    padding-top:98px;
  }

  .world-lore-archive .lore-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(3,110px);
    gap:9px;
    margin-top:24px;
  }

  .world-lore-archive .lore-grid .lore-card{
    height:110px;
    min-height:110px;
    padding:12px;
  }

  .world-lore-archive .lore-grid .lore-card strong{
    font-size:21px;
    height:calc(100% - 22px);
    padding:5px 0 14px;
  }

  .world-lore-archive .lore-grid .lore-card em{
    left:12px;
    bottom:10px;
  }

  .world-lore-archive .lore-section-head{
    display:block;
  }

  .world-lore-archive .lore-section-head>p{
    max-width:560px;
    margin-top:10px;
  }

  .world-lore-archive .lore-people-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .world-lore-archive .lore-people-grid .lore-person-card{
    height:132px;
    min-height:132px;
  }
}

@media(max-width:640px){
  .world-lore-archive .lore-grid{
    grid-template-rows:repeat(3,96px);
    gap:7px;
  }

  .world-lore-archive .lore-grid .lore-card{
    height:96px;
    min-height:96px;
  }

  .world-lore-archive .lore-grid .lore-card strong{
    font-size:17px;
    height:calc(100% - 20px);
    padding:3px 0 12px;
  }

  .world-lore-archive .lore-grid .lore-card em{
    left:12px;
    right:28px;
    bottom:9px;
    font-size:4px;
  }

  .world-lore-archive .lore-people-block{
    padding-top:22px;
    margin-bottom:22px;
  }

  .world-lore-archive .lore-people-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .world-lore-archive .lore-people-grid .lore-person-card{
    height:120px;
    min-height:120px;
    padding:13px 13px 27px;
  }

  .world-lore-archive .lore-people-grid .lore-person-card strong{
    font-size:20px;
  }

  .world-lore-archive .lore-people-grid .lore-person-card em{
    left:13px;
    right:25px;
    bottom:9px;
    font-size:5px;
  }

  .world-lore-archive .lore-people-grid .lore-person-card i{
    right:11px;
    bottom:9px;
  }
}


/* LORE SCROLLBAR EDGE FIX */
.world-lore-archive{
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

.world-lore-archive .signal-shell{
  height:auto !important;
  min-height:100% !important;
  overflow:visible !important;
}


/* LORE INSPECTOR VIEWPORT FIX */
.world-lore-archive .signal-inspect{
  position:fixed !important;
  z-index:50 !important;
  top:50% !important;
  right:5vw !important;
  left:auto !important;
  bottom:auto !important;
  width:min(430px,36vw) !important;
  max-height:78vh !important;
  overflow-y:auto !important;
  box-sizing:border-box !important;
  transform:translateY(-50%) translateX(18px) !important;
}

.world-lore-archive .signal-inspect.open{
  transform:translateY(-50%) translateX(0) !important;
}

@media(max-width:900px){
  .world-lore-archive .signal-inspect{
    left:5vw !important;
    right:5vw !important;
    width:auto !important;
    max-height:70vh !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) translateX(18px) !important;
  }

  .world-lore-archive .signal-inspect.open{
    transform:translateY(-50%) translateX(0) !important;
  }
}

@media(max-width:640px){
  .world-lore-archive .signal-inspect{
    left:16px !important;
    right:16px !important;
    width:auto !important;
    max-height:68vh !important;
    padding:28px 24px 24px !important;
  }

  .world-lore-archive .signal-inspect h3{
    font-size:34px !important;
  }
}


/* LORE MOBILE INSPECTOR FINAL */

/* The transformed archive was becoming the containing block for the fixed inspector. */
.world-lore-archive{
  transform:none !important;
}

.world-lore-archive .signal-inspect{
  position:fixed !important;
  z-index:60 !important;
  top:50vh !important;
  right:5vw !important;
  left:auto !important;
  bottom:auto !important;
  width:min(430px,36vw) !important;
  max-height:78vh !important;
  overflow-y:auto !important;
  box-sizing:border-box !important;
  transform:translate3d(18px,-50%,0) !important;
}

.world-lore-archive .signal-inspect.open{
  transform:translate3d(0,-50%,0) !important;
}

@media(max-width:900px){
  .world-lore-archive .signal-inspect{
    top:50vh !important;
    right:5vw !important;
    left:5vw !important;
    bottom:auto !important;
    width:auto !important;
    max-height:72vh !important;
    padding:30px 28px 26px !important;
    transform:translate3d(18px,-50%,0) !important;
  }

  .world-lore-archive .signal-inspect.open{
    transform:translate3d(0,-50%,0) !important;
  }
}

@media(max-width:640px){
  .world-lore-archive .signal-inspect{
    top:50vh !important;
    right:14px !important;
    left:14px !important;
    width:auto !important;
    max-height:68vh !important;
    padding:26px 22px 22px !important;
    transform:translate3d(12px,-50%,0) !important;
  }

  .world-lore-archive .signal-inspect.open{
    transform:translate3d(0,-50%,0) !important;
  }

  .world-lore-archive .signal-inspect h3{
    font-size:36px !important;
    line-height:.9 !important;
  }

  .world-lore-archive .signal-inspect p:not(.archive-kicker){
    margin:16px 0 20px !important;
    font-size:11px !important;
    line-height:1.7 !important;
  }
}