.lore{
  position:relative;
  min-height:420px;
  overflow:hidden;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--st-faint) 35%, transparent) 1.1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--st-page-2);
}

.lore-frame{
  position:absolute;
  left:36px;
  top:42px;
  width:min(340px, 46%);
  height:250px;
  border:1.5px dashed color-mix(in srgb, var(--st-warm) 45%, var(--st-border-strong));
  border-radius:10px;
  background:color-mix(in srgb, var(--st-warm) 8%, transparent);
}

.lore-frame::before,
.lore-frame::after{
  content:"";
  position:absolute;
  top:-10px;
  width:64px;
  height:18px;
  background:repeating-linear-gradient(-45deg, rgba(255,255,255,.12) 0 5px, transparent 5px 10px), rgba(235,225,195,.55);
}

.lore-frame::before{ left:-16px; transform:rotate(-32deg); }
.lore-frame::after{ right:-16px; transform:rotate(30deg); }

.lore-frame span{
  display:block;
  padding:12px 16px 0;
  font-family:var(--st-serif);
  font-size:18px;
  color:var(--st-text);
}

.lore-note{
  position:absolute;
  width:168px;
  padding:14px 14px 16px;
  background:linear-gradient(170deg, #F4ECD8, #E8DCC4);
  color:#2A2118;
  border-radius:4px;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.7);
  font-family:var(--st-serif);
}

.lore-note.a{
  left:58px;
  top:96px;
  transform:rotate(-1.4deg);
}

.lore-note.b{
  left:210px;
  top:168px;
  transform:rotate(1.1deg);
}

.lore-note i{
  display:block;
  height:10px;
  margin:-14px -14px 10px;
  background:#7fa58b;
  clip-path:polygon(0 20%, 4% 0, 100% 8%, 100% 100%, 0 100%);
}

.lore-note b{
  display:block;
  font-size:15px;
  font-weight:600;
  margin-bottom:4px;
}

.lore-note p{
  margin:0;
  font-size:13px;
  line-height:1.4;
}

.lore-card{
  position:absolute;
  right:28px;
  top:36px;
  width:250px;
  padding:20px 18px 18px;
  background:linear-gradient(170deg, #F4ECD8, #E8DCC4);
  color:#2A2118;
  border-radius:6px;
  box-shadow:0 16px 32px -14px rgba(0,0,0,.75);
  transform:rotate(0.6deg);
}

.lore-card::before{
  content:"";
  display:block;
  height:12px;
  margin:-20px -18px 14px;
  background:#8B6BB5;
  clip-path:polygon(0 18%, 3% 0, 100% 10%, 100% 100%, 0 100%);
}

.portrait{
  width:52px;
  height:52px;
  border-radius:50%;
  margin-bottom:12px;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 35% 30%, #4C1D95, #1E293B);
  border:1px solid rgba(42,33,24,.2);
  font-family:var(--st-serif);
  font-style:italic;
  font-size:24px;
  color:#C4B5FD;
}

.lore-card h4{
  margin:0;
  font-family:var(--st-serif);
  font-weight:400;
  font-size:24px;
}

.lore-card .role{
  font-family:var(--st-serif);
  font-style:italic;
  font-size:14px;
  color:#5C4A7A;
  margin:2px 0 12px;
}

.lore-card dl{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 12px;
  font-size:12.5px;
  padding:12px 0;
  border-top:1px solid rgba(42,33,24,.14);
  border-bottom:1px solid rgba(42,33,24,.14);
  margin:0 0 12px;
}

.lore-card dt{ color:#6B5C4A; margin:0; }
.lore-card dd{ margin:0; }

.lore-card p{
  margin:0;
  font-size:13px;
  line-height:1.5;
}

@media (max-width:1000px){
  .lore{ min-height:520px; }
  .lore-frame{ width:58%; }
  .lore-note.b{ display:none; }
  .lore-card{ right:16px; width:220px; }
}