.hp-page{
  --hp-gold:#e5c982;
  --hp-gold-soft:#fff0bd;
  --hp-ink:#0d1715;
  --hp-purple:#2e3444;
  --hp-panel:rgba(14, 24, 22, .86);
  --hp-line:rgba(229, 201, 130, .3);
  --ray-intensity:.42;
  min-height:100vh;
  overflow-x:hidden;
  color:#f6f1e7;
  background-color:#0a1b18;
  background-image:url("../images/fandom/hp/bg_hp.webp");
  background-position:center center;
  background-size:cover;
  background-attachment:fixed;
  font-family:"EB Garamond", Georgia, serif;
}

.hp-page h1,
.hp-page h2{
  animation:none;
}

.hp-page::before,
.hp-page::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}

.hp-page::before{
  z-index:0;
  background:
    radial-gradient(760px 500px at 69% 16%, rgba(255, 218, 144, .12), transparent 62%),
    radial-gradient(860px 620px at 16% 18%, rgba(41, 65, 73, .22), transparent 68%),
    radial-gradient(780px 560px at 80% 84%, rgba(53, 88, 58, .14), transparent 70%),
    linear-gradient(180deg, rgba(5, 17, 16, .12), rgba(4, 10, 10, .58));
  mix-blend-mode:multiply;
}

.hp-page::after{
  z-index:1;
  background:
    radial-gradient(circle at 56% 28%, transparent 0 46%, rgba(3, 8, 8, .54) 100%),
    linear-gradient(180deg, rgba(3, 10, 10, .06), rgba(3, 9, 8, .32));
}

.hp-nav,
.hp-hero,
.hp-shell,
.hp-moon{
  position:relative;
  z-index:4;
}

.hp-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.55rem 1rem;
  max-width:980px;
  margin:0 auto 2.2rem;
  padding:1.25rem 3.5rem 0;
}

.hp-nav a{
  color:var(--hp-gold);
  text-decoration:none;
  border-bottom:1px dashed rgba(217, 189, 117, .45);
  text-shadow:0 2px 12px rgba(0,0,0,.68);
}

.hp-nav a:hover{
  color:var(--hp-gold-soft);
  border-bottom-color:var(--hp-gold-soft);
}

.hp-moon{
  position:fixed;
  left:clamp(.85rem, 2.6vw, 2rem);
  top:clamp(.85rem, 2.6vw, 2rem);
  width:42px;
  height:42px;
  color:var(--hp-gold);
  z-index:6;
  filter:drop-shadow(0 0 12px rgba(217, 189, 117, .55));
}

.hp-moon svg{
  width:100%;
  height:100%;
  display:block;
}

.hp-hero,
.hp-shell{
  width:min(calc(100% - 2rem), 1120px);
  max-width:1120px;
  margin-inline:auto;
}

.hp-hero{
  margin-bottom:1rem;
  padding:0 1rem;
}

.hp-shell{
  padding:0 1rem;
}

.hp-kicker,
.hp-card-kicker{
  margin:0 0 .4rem;
  color:var(--hp-gold);
  font-family:"Cinzel", Georgia, serif;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-shadow:0 0 12px rgba(217, 189, 117, .32);
}

.hp-hero h1{
  margin:0 0 .65rem;
  color:#fff3dc;
  font-family:"Cinzel", Georgia, serif;
  font-size:clamp(2.2rem, 5.6vw, 4.15rem);
  line-height:.95;
  text-transform:uppercase;
  text-shadow:0 2px 0 rgba(48, 27, 12, .86), 0 0 16px rgba(217, 189, 117, .42), 0 10px 28px rgba(0,0,0,.72);
}

.hp-lede{
  max-width:72rem;
  margin:0;
  color:rgba(255, 244, 221, .92);
  font-size:clamp(1.08rem, 1.9vw, 1.32rem);
  line-height:1.32;
  text-shadow:0 2px 12px rgba(0,0,0,.75);
}

.hp-grid{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  margin-bottom:4rem;
}

.hp-card{
  position:relative;
  min-height:0;
  padding:clamp(.95rem, 2.2vw, 1.25rem);
  overflow:hidden;
  border:1px solid var(--hp-line);
  border-radius:10px;
  background:
    radial-gradient(520px 240px at 0% 0%, rgba(229, 201, 130, .095), transparent 70%),
    radial-gradient(520px 280px at 100% 100%, rgba(47, 76, 71, .16), transparent 72%),
    linear-gradient(180deg, rgba(14, 24, 22, .86), rgba(5, 12, 11, .9));
  box-shadow:
    0 16px 38px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.035);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hp-card::before{
  content:"";
  position:absolute;
  inset:.55rem;
  border:1px dashed rgba(217, 189, 117, .12);
  border-radius:7px;
  pointer-events:none;
}

.hp-card:hover,
.hp-card:focus-within{
  transform:translateY(-2px);
  border-color:rgba(217, 189, 117, .44);
  box-shadow:
    0 18px 42px rgba(0,0,0,.4),
    0 0 20px rgba(217, 189, 117, .08),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

.hp-card h2{
  position:relative;
  z-index:1;
  margin:0 0 .55rem;
  color:#fff3dc;
  font-family:"Cinzel", Georgia, serif;
  font-size:clamp(1.28rem, 2.05vw, 1.62rem);
  line-height:1.18;
  letter-spacing:.025em;
  text-transform:uppercase;
  text-wrap:balance;
  text-shadow:0 0 14px rgba(217, 189, 117, .28), 0 8px 24px rgba(0,0,0,.72);
}

.hp-card h2 a{
  color:inherit;
  text-decoration:none;
}

.hp-card h2 a:hover{
  color:var(--hp-gold-soft);
}

.hp-card p,
.hp-card ul{
  position:relative;
  z-index:1;
  color:rgba(255, 244, 221, .9);
  font-size:1.12rem;
  line-height:1.42;
}

.hp-card p{
  margin:.5rem 0 0;
}

.hp-card ul{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:.55rem;
  margin:.75rem 0 0;
  padding:0;
  list-style:none;
}

.hp-card li{
  padding:.62rem .72rem;
  border:1px solid rgba(217, 189, 117, .2);
  border-radius:8px;
  background:
    radial-gradient(180px 120px at 0% 0%, rgba(217, 189, 117, .09), transparent 70%),
    rgba(255,255,255,.03);
  font-size:1rem;
  line-height:1.32;
}

.hp-duo{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.hp-duo .hp-card{
  min-height:0;
}

.hp-note{
  position:relative;
  z-index:1;
  margin:.75rem 0 0;
  padding:.72rem .82rem;
  border-left:3px solid var(--hp-gold);
  background:rgba(217, 189, 117, .075);
  color:rgba(255, 244, 221, .86);
  font-style:italic;
}

@media (max-width:780px){
  .hp-nav{
    padding-inline:3rem 1rem;
  }
}

.hp-character-main{
  position:relative;
  z-index:4;
  width:min(calc(100% - 2rem), 1120px);
  max-width:1120px;
  margin:0 auto 4rem;
  padding:0 1rem;
}

.hp-character-card{
  border:1px solid var(--hp-line);
  border-radius:10px;
  padding:clamp(1rem, 2.4vw, 1.35rem);
  background:
    radial-gradient(640px 300px at 100% 0%, rgba(229, 201, 130, .12), transparent 66%),
    radial-gradient(520px 300px at 0% 100%, rgba(48, 78, 74, .13), transparent 70%),
    linear-gradient(180deg, var(--hp-panel), rgba(5, 12, 11, .92));
  box-shadow:0 16px 38px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.035);
}

.hp-character-card h1{
  margin:0 0 .7rem;
  color:#fff3dc;
  font-family:"Cinzel", Georgia, serif;
  font-size:clamp(2rem, 4.8vw, 3.6rem);
  line-height:1;
  text-shadow:0 0 16px rgba(217, 189, 117, .38), 0 9px 26px rgba(0,0,0,.72);
}

.hp-character-card h2{
  margin:1.15rem 0 .4rem;
  color:var(--hp-gold-soft);
  font-family:"Cinzel", Georgia, serif;
  font-size:clamp(1.22rem, 2.2vw, 1.65rem);
  text-transform:uppercase;
  letter-spacing:.02em;
}

.hp-character-card p{
  max-width:76ch;
  margin:.65rem 0 0;
  color:rgba(255, 244, 221, .9);
  font-size:1.12rem;
  line-height:1.42;
}

.hp-crown-note{
  margin:.85rem 0;
  padding:.85rem .95rem;
  border:1px solid rgba(217, 189, 117, .24);
  border-left:4px solid var(--hp-gold);
  border-radius:12px;
  background:
    radial-gradient(300px 160px at 0% 0%, rgba(217, 189, 117, .16), transparent 70%),
    rgba(217, 189, 117, .055);
  color:rgba(255, 244, 221, .9);
  font-style:italic;
}

@media (max-width:760px){
  .hp-hero,
  .hp-shell,
  .hp-character-main{
    width:min(calc(100% - .75rem), 1120px);
    padding:0 .4rem;
  }

  .hp-card p,
  .hp-card ul,
  .hp-character-card p{
    font-size:1.03rem;
  }
}