/* Lore section (lore/, lore/aion-1/, lore/aion-2/), 2026-10-26. Loaded only by those pages, after aion.css and hub.css; everything here
   sits under a lore- name so nothing leaks into other pages. */

/* the story as a numbered timeline */
.lore-tl{list-style:none; margin:30px 0 0; padding:0; position:relative; display:flex; flex-direction:column; gap:0}
.lore-tl::before{content:""; position:absolute; left:19px; top:14px; bottom:14px; width:2px; background:linear-gradient(180deg,var(--accent),var(--rule-2))}
.lore-tl li{position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); gap:20px; padding:0 0 26px}
.lore-tl li:last-child{padding-bottom:0}
.lore-tl .n{position:relative; z-index:1; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font:500 15px "IBM Plex Mono",monospace; color:var(--accent-ink); background:var(--bg); border:2px solid var(--accent)}
.lore-tl h3{font-family:"Marcellus",serif; font-weight:400; font-size:24px; line-height:1.15; margin:6px 0 6px; color:var(--ink)}
.lore-tl p{margin:0; max-width:68ch; color:var(--ink-2); line-height:1.62}

/* two big doors into the lore */
.lore-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:44px}
.lore-card{display:flex; flex-direction:column; gap:8px; padding:0 0 20px; border-radius:16px; overflow:hidden; border:1px solid var(--card-b); background:var(--card); box-shadow:var(--shadow); text-decoration:none; color:inherit}
.lore-card:hover{transform:translateY(-2px); border-color:var(--accent-ink)}
.lore-card .lc-im{display:block; height:190px; overflow:hidden; position:relative; background:#0d0a14}
.lore-card .lc-im::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.5))}
.lore-card .lc-im img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.lore-card:hover .lc-im img{transform:scale(1.05)}
.lore-card .k,.lore-card h3,.lore-card p,.lore-card .go{margin-left:22px; margin-right:22px}
.lore-card .k{margin-top:14px; font:500 10.5px "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.lore-card h3{font-family:"Marcellus",serif; font-weight:400; font-size:26px; line-height:1.1; margin-top:0; margin-bottom:0}
.lore-card p{margin-top:0; margin-bottom:0; color:var(--ink-2); line-height:1.55}
.lore-card .go{margin-top:4px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink)}

/* prose pages */
.lore-prose{max-width:820px}
.lore-prose p{margin:0 0 16px; font-size:17.5px; line-height:1.72; color:var(--ink-2)}
.lore-prose p b{color:var(--ink); font-weight:600}
.lore-prose .fine{font-size:14.5px; line-height:1.55; color:var(--ink-3)}
.lore-lords{margin:18px 0 8px}
.lore-note{margin-top:30px}
.lore-gl .box h3{font-family:"Marcellus",serif; font-weight:400}
.lore-gl .box p{font-size:15px; line-height:1.55}
.lore-lands ul{margin:8px 0 0; padding-left:20px}
.lore-lands li{margin:7px 0; line-height:1.55; color:var(--ink-2)}

/* the two sides' stories */
.lore-side{display:flex; flex-direction:column}
.lore-side h3{font-family:"Marcellus",serif; font-weight:400; font-size:26px}
.lore-side.elyos{border-top:3px solid #6fa8ff}
.lore-side.asmodian{border-top:3px solid #b36fd8}
.lore-spoil{margin-top:16px; border-top:1px dashed var(--rule-2); padding-top:14px}
.lore-spoil summary{cursor:pointer; font:500 12.5px "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); list-style:none}
.lore-spoil summary::-webkit-details-marker{display:none}
.lore-spoil summary::before{content:"+ "}
.lore-spoil[open] summary::before{content:"\2212  "}
.lore-spoil .eps{list-style:none; margin:14px 0 4px; padding:0; display:flex; flex-direction:column; gap:16px}
.lore-spoil .ep .h{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 14px}
.lore-spoil .ep .h b{font-family:"Marcellus",serif; font-weight:400; font-size:18px; color:var(--ink)}
.lore-spoil .ep .h span{font:500 11px "IBM Plex Mono",monospace; color:var(--ink-3)}
.lore-spoil .ep p{margin:4px 0 0; font-size:15px; line-height:1.6; color:var(--ink-2)}

@media (max-width:760px){
  .lore-cards{grid-template-columns:minmax(0,1fr)}
  .lore-tl li{grid-template-columns:34px minmax(0,1fr); gap:14px}
  .lore-tl::before{left:16px}
  .lore-tl .n{width:34px; height:34px; font-size:13px}
  .lore-tl h3{font-size:21px}
}