.character-page{
  --char-accent:#e0c97a;
  --char-accent-soft:#fff0b9;
  --char-panel:rgba(17, 24, 21, .82);
  --char-line:rgba(224, 201, 122, .28);
  --char-copy:#f6f1e7;
  min-height:100vh;
  margin:0;
  color:var(--char-copy);
  background-color:#0a1b18;
  background-image:image-set(
    url("../images/bg_img.webp") type("image/webp"),
    url("../images/bg_img.png") type("image/png")
  );
  background-position:center;
  background-size:cover;
  background-attachment:fixed;
  font-family:"EB Garamond", Georgia, serif;
}

.character-page--got{--char-accent:#dfc06f; --char-panel:rgba(20, 15, 12, .86); --char-line:rgba(215, 184, 112, .34);}
.character-page--gravity{--char-accent:#f4d66d; --char-panel:rgba(37, 24, 12, .84); --char-line:rgba(244, 214, 109, .34);}
.character-page--sherlock{--char-accent:#9de8e2; --char-panel:rgba(5, 15, 18, .86); --char-line:rgba(157, 232, 226, .3);}
.character-page--undertale{--char-accent:#fff2a1; --char-panel:rgba(12, 12, 16, .9); --char-line:rgba(255, 242, 161, .28);}
.character-page--fnh{--char-accent:#c6aa6a; --char-panel:rgba(18, 13, 10, .9); --char-line:rgba(198, 170, 106, .32);}
.character-page--hp{--char-accent:#d8bb74; --char-panel:rgba(22, 15, 25, .86); --char-line:rgba(216, 187, 116, .32);}

.character-wash,
.character-vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.character-wash{
  z-index:0;
  background:
    radial-gradient(900px 520px at 18% 0%, color-mix(in srgb, var(--char-accent) 22%, transparent), transparent 66%),
    radial-gradient(720px 520px at 84% 18%, rgba(85, 58, 92, .18), transparent 70%),
    linear-gradient(180deg, rgba(5, 8, 7, .18), rgba(4, 5, 5, .68));
}

.character-vignette{
  z-index:1;
  background:radial-gradient(circle at 50% 22%, transparent 0 52%, rgba(0,0,0,.58) 100%);
}

.character-nav,
.character-shell{
  position:relative;
  z-index:2;
}

.character-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.55rem 1rem;
  padding:1.2rem 1rem 0;
  margin:0 auto 2rem;
}

.character-nav a{
  color:var(--char-accent);
  text-decoration:none;
  border-bottom:1px dashed color-mix(in srgb, var(--char-accent) 60%, transparent);
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}

.character-nav a:hover,
.character-nav a:focus-visible{
  color:var(--char-accent-soft);
  border-bottom-color:var(--char-accent-soft);
}

.character-shell{
  width:min(calc(100% - 2rem), 900px);
  margin:0 auto 4rem;
}

.character-card{
  border:1px solid var(--char-line);
  border-radius:14px;
  padding:clamp(1.1rem, 3vw, 2rem);
  background:
    radial-gradient(520px 260px at 0% 0%, color-mix(in srgb, var(--char-accent) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--char-panel), rgba(7, 8, 8, .9));
  box-shadow:
    0 22px 54px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

.character-kicker{
  margin:0 0 .5rem;
  color:var(--char-accent);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.character-card h1{
  margin:0 0 .85rem;
  color:var(--char-accent-soft);
  font-size:clamp(2.1rem, 6vw, 4.2rem);
  line-height:1;
  text-shadow:0 0 18px color-mix(in srgb, var(--char-accent) 34%, transparent), 0 10px 28px rgba(0,0,0,.72);
}

.character-card p{
  max-width:68ch;
  margin:0;
  font-size:clamp(1.1rem, 2.2vw, 1.35rem);
  line-height:1.45;
  color:rgba(246, 241, 231, .92);
}

.character-note{
  margin-top:1.2rem;
  padding:.8rem .9rem;
  border:1px solid color-mix(in srgb, var(--char-accent) 22%, transparent);
  border-radius:10px;
  color:rgba(246, 241, 231, .76);
  background:rgba(0,0,0,.22);
  font-size:1rem;
}

@media (max-width:620px){
  .character-shell{width:min(calc(100% - 1rem), 900px);}
  .character-card{border-radius:10px;}
}