/* V220 Critical System Archive Rescue
   This inline layer protects the Characters block on production servers if the large CSS file is cached,
   partially truncated, or if older cascade rules render the block as unstyled HTML. */
#chr-section.system-archive,
#chr-section.system-archive * {
  box-sizing: border-box;
}
#chr-section.system-archive {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  padding: clamp(46px, 4.2vw, 74px) clamp(18px, 3vw, 42px) clamp(54px, 4.8vw, 82px) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: rgba(248,241,227,.92) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(212,175,55,.10), transparent 30%),
    radial-gradient(circle at 84% 52%, rgba(156,47,47,.12), transparent 34%),
    linear-gradient(180deg, rgba(5,4,4,.58), rgba(5,4,4,.28) 44%, rgba(5,4,4,.58)) !important;
}
#chr-section.system-archive .archive-shell {
  position: relative !important;
  width: min(1260px, 100%) !important;
  margin: 0 auto !important;
}
#chr-section.system-archive .archive-header {
  width: min(760px, 100%) !important;
  margin: 0 auto clamp(22px, 2.4vw, 34px) !important;
  text-align: center !important;
}
#chr-section.system-archive .archive-kicker {
  display: inline-flex !important;
  min-height: 26px !important;
  padding: 6px 12px 5px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(212,175,55,.34) !important;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.026) 0 1px, rgba(255,255,255,.008) 2px, transparent 8px),
    linear-gradient(180deg, rgba(34,31,27,.78), rgba(8,7,7,.88)) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 8px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(230,201,132,.78) !important;
}
#chr-section.system-archive .archive-title {
  margin: 12px 0 8px !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(38px, 4.6vw, 72px) !important;
  line-height: .94 !important;
  font-weight: 300 !important;
  letter-spacing: -.045em !important;
  color: rgba(248,241,227,.96) !important;
  text-shadow: 0 18px 44px rgba(0,0,0,.42), 0 0 30px rgba(212,175,55,.08) !important;
}
#chr-section.system-archive .archive-title em {
  color: rgba(212,175,55,.90) !important;
  font-style: italic !important;
}
#chr-section.system-archive .archive-desc {
  width: min(620px, 100%) !important;
  margin: 0 auto !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(15px, 1.25vw, 20px) !important;
  line-height: 1.32 !important;
  color: rgba(248,241,227,.78) !important;
}
#chr-section.system-archive .archive-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 7px !important;
  width: min(880px,100%) !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
}
#chr-section.system-archive .archive-tab {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 7px 12px 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(212,175,55,.28) !important;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.026) 0 1px, rgba(255,255,255,.008) 2px, transparent 8px),
    linear-gradient(180deg, rgba(30,27,23,.76), rgba(12,10,9,.88) 58%, rgba(6,5,5,.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255,244,214,.08), 0 8px 18px rgba(0,0,0,.20) !important;
  color: rgba(248,241,227,.78) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}
#chr-section.system-archive .archive-tab span {
  display: inline !important;
  margin: 0 6px 0 0 !important;
  color: rgba(212,175,55,.78) !important;
  font-size: 7px !important;
}
#chr-section.system-archive .archive-tab.is-active,
#chr-section.system-archive .archive-tab:hover {
  border-color: rgba(230,201,132,.54) !important;
  color: rgba(248,241,227,.96) !important;
  box-shadow: 0 0 20px rgba(212,175,55,.12), 0 10px 22px rgba(0,0,0,.26) !important;
}
#chr-section.system-archive .archive-stage {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(250px,.68fr) minmax(460px,1.32fr) !important;
  gap: clamp(14px,1.8vw,24px) !important;
  align-items: stretch !important;
  min-height: 460px !important;
  padding: clamp(10px,1vw,14px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(212,175,55,.26) !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(212,175,55,.13), transparent 42%),
    radial-gradient(circle at 88% 28%, rgba(156,47,47,.09), transparent 34%),
    linear-gradient(180deg, rgba(255,244,214,.035), rgba(255,244,214,.008)),
    rgba(7,6,6,.46) !important;
  box-shadow: inset 0 1px 0 rgba(255,244,214,.08), 0 34px 90px rgba(0,0,0,.42) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
}
#chr-section.system-archive .archive-portrait-panel {
  position: relative !important;
  min-height: 440px !important;
  max-height: 440px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(212,175,55,.22) !important;
  background: radial-gradient(circle at 50% 8%, rgba(212,175,55,.18), transparent 34%), linear-gradient(180deg, rgba(16,14,12,.40), rgba(5,5,5,.88)) !important;
}
#chr-section.system-archive .archive-portrait-glow {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 20%, rgba(212,175,55,.14), transparent 34%), radial-gradient(circle at 50% 68%, rgba(156,47,47,.10), transparent 40%) !important;
}
#chr-section.system-archive .archive-portrait {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  width: min(92%,390px) !important;
  max-width: 390px !important;
  height: 90% !important;
  max-height: 395px !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 42px rgba(0,0,0,.36), 0 0 28px rgba(212,175,55,.08) !important;
}
#chr-section.system-archive .archive-portrait-caption {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 9px 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(212,175,55,.28) !important;
  background: linear-gradient(180deg, rgba(16,14,12,.78), rgba(5,5,5,.86)) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 8px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: rgba(230,201,132,.84) !important;
}
#chr-section.system-archive .archive-dossier {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  padding: clamp(18px,1.8vw,26px) !important;
  border: 1px solid rgba(212,175,55,.25) !important;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.030) 0 1px, rgba(255,255,255,.010) 2px, transparent 9px),
    radial-gradient(circle at 78% 14%, rgba(212,175,55,.14), transparent 34%),
    radial-gradient(circle at 8% 88%, rgba(156,47,47,.10), transparent 34%),
    linear-gradient(180deg, rgba(25,22,18,.84), rgba(7,6,6,.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255,244,214,.09), 0 26px 72px rgba(0,0,0,.34) !important;
}
#chr-section.system-archive .archive-dossier-top {
  margin-bottom: 14px !important;
}
#chr-section.system-archive .archive-access,
#chr-section.system-archive .archive-identity span,
#chr-section.system-archive .archive-split span,
#chr-section.system-archive .archive-details span {
  font-family: Inter, Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .16em !important;
  font-size: 8px !important;
  color: rgba(230,201,132,.68) !important;
}
#chr-section.system-archive .archive-identity h3 {
  margin: 6px 0 4px !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(30px,3.1vw,46px) !important;
  line-height: .96 !important;
  font-weight: 300 !important;
  letter-spacing: -.045em !important;
  color: rgba(248,241,227,.96) !important;
}
#chr-section.system-archive .archive-identity p {
  margin: 0 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(15px,1.24vw,19px) !important;
  font-style: italic !important;
  color: rgba(212,175,55,.82) !important;
}
#chr-section.system-archive .archive-quote {
  margin: 13px 0 16px !important;
  padding: 12px 0 12px 15px !important;
  border-left: 1px solid rgba(212,175,55,.36) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(17px,1.45vw,23px) !important;
  line-height: 1.16 !important;
  font-style: italic !important;
  color: rgba(248,241,227,.86) !important;
}
#chr-section.system-archive .archive-split,
#chr-section.system-archive .archive-details {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 9px !important;
  margin-bottom: 14px !important;
}
#chr-section.system-archive .archive-details {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  margin-bottom: 0 !important;
}
#chr-section.system-archive .archive-split > div,
#chr-section.system-archive .archive-details > div {
  border: 1px solid rgba(212,175,55,.16) !important;
  border-radius: 15px !important;
  padding: 10px 11px !important;
  background: linear-gradient(180deg, rgba(255,244,214,.040), rgba(255,244,214,.010)), rgba(7,6,6,.34) !important;
}
#chr-section.system-archive .archive-split p,
#chr-section.system-archive .archive-details p {
  margin: 5px 0 0 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(13px,1vw,16px) !important;
  line-height: 1.22 !important;
  color: rgba(248,241,227,.82) !important;
}
#chr-section.system-archive .archive-matrix {
  display: grid !important;
  grid-template-columns: 92px minmax(0,1fr) !important;
  gap: 13px !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}
#chr-section.system-archive .archive-radar {
  position: relative !important;
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(212,175,55,.34) !important;
  background: radial-gradient(circle, rgba(212,175,55,.12) 0 2px, transparent 3px), rgba(4,4,4,.30) !important;
}
#chr-section.system-archive .archive-radar span { display: none !important; }
#chr-section.system-archive .archive-radar-core {
  position: absolute !important;
  inset: 22px !important;
  border-radius: 50% !important;
  background: conic-gradient(from 220deg, rgba(212,175,55,.10), rgba(212,175,55,.48), rgba(156,47,47,.22), rgba(212,175,55,.10)) !important;
}
#chr-section.system-archive .archive-traits {
  display: grid !important;
  gap: 7px !important;
}
#chr-section.system-archive .archive-trait {
  display: grid !important;
  grid-template-columns: minmax(72px,96px) 1fr 26px !important;
  gap: 8px !important;
  align-items: center !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 8px !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: rgba(248,241,227,.72) !important;
}
#chr-section.system-archive .archive-trait i {
  height: 3px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.07) !important;
}
#chr-section.system-archive .archive-trait b {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(156,47,47,.62), rgba(212,175,55,.88), rgba(255,240,190,.76)) !important;
}
#chr-section.system-archive .archive-trait em {
  font-style: normal !important;
  color: rgba(230,201,132,.82) !important;
}
@media (max-width: 1100px) {
  #chr-section.system-archive .archive-stage { grid-template-columns: 1fr !important; }
  #chr-section.system-archive .archive-portrait-panel { min-height: 360px !important; max-height: none !important; }
  #chr-section.system-archive .archive-portrait { max-height: 310px !important; }
}
@media (max-width: 760px) {
  #chr-section.system-archive { padding: 52px 14px 64px !important; }
  #chr-section.system-archive .archive-stage { border-radius: 22px !important; }
  #chr-section.system-archive .archive-tabs { justify-content: flex-start !important; overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none !important; }
  #chr-section.system-archive .archive-tabs::-webkit-scrollbar { display:none !important; }
  #chr-section.system-archive .archive-tab { flex: 0 0 auto !important; }
  #chr-section.system-archive .archive-split,
  #chr-section.system-archive .archive-matrix,
  #chr-section.system-archive .archive-details { grid-template-columns: 1fr !important; }
}