/* AION Companion fan hub: page components layered on the concept page's tokens (css/aion.css). Photos are NC's official
   AION 2 screenshots (Steam store page), self-hosted and credited; the decorative plates are our own SVG in the two side
   themes (Elyos dawn / Asmodian night). */
.lede{font-size:19px; color:var(--ink-2); margin-top:16px; max-width:44em; line-height:1.55}
.fine{font-size:13.5px; color:var(--ink-3); margin-top:14px; line-height:1.55}
.fine a,.prose a,.box a,.note p a{color:var(--accent-ink); text-decoration:underline; text-decoration-color:var(--rule-2); text-underline-offset:2px}
.crumbs{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.08em; color:var(--ink-3); padding-top:22px}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--ink)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- page hero ---------- */
.phero{position:relative; overflow:hidden; border-bottom:1px solid var(--rule); background:var(--sky)}
.phero-in{position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:center; padding-top:30px; padding-bottom:48px}
.phero-in.solo{grid-template-columns:minmax(0,1fr)}
.phero h1{font-size:clamp(38px,5.2vw,68px); line-height:1.02; margin-top:8px; max-width:16ch}
.phero h1 em{font-style:normal; color:var(--accent-ink)}
:root[data-theme="asmodian"] .phero h1 em{color:#ff8a99}
@media (prefers-color-scheme: dark){ :root:not([data-theme="elyos"]) .phero h1 em{color:#ff8a99} }
.phero .plate{width:100%; max-width:520px; margin-left:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.18))}
.plate svg{display:block; width:100%; height:auto}

/* ---------- key facts bar ---------- */
.keybar{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:26px}
.keybar > div{padding:12px 14px; border-radius:12px; background:var(--card); border:1px solid var(--card-b); box-shadow:var(--shadow)}
.keybar .k{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.keybar .v{font-family:"Marcellus",serif; font-size:24px; line-height:1.1; margin-top:3px; color:var(--ink)}
.keybar .s{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.cd{font-variant-numeric:tabular-nums}

/* ---------- blocks ---------- */
.blk{padding:60px 0; position:relative}
.blk h2{font-size:clamp(30px,3.6vw,46px); line-height:1.02}
.sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px}
.sechead p{color:var(--ink-2); margin:8px 0 0; max-width:60ch}
.sechead .more{font-family:"Marcellus SC","Marcellus",serif; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink)}
.box{border-radius:14px; background:var(--card); border:1px solid var(--card-b); padding:22px 24px; box-shadow:var(--shadow)}
.box h3{font-size:24px; line-height:1.1}
.box p,.box li{font-size:15.5px; color:var(--ink-2); line-height:1.6}
.box p + p{margin-top:10px}
.box h3 + p,.box h3 + ul,.box h3 + ol{margin-top:10px}
.box b,.box strong{color:var(--ink); font-weight:600}
.box ul,.box ol{margin:12px 0 0; padding-left:20px}
.box li{margin:6px 0}
.box.warn{border-color:rgba(var(--hot-rgb),.45); background:linear-gradient(180deg,rgba(var(--hot-rgb),.08),rgba(var(--hot-rgb),.03))}
.box.gold{border-color:var(--pill-b)}
.box .price{font-family:"Marcellus",serif; font-size:30px; color:var(--ink); line-height:1}
.box .price small{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-left:8px}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.src{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:12px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.02em}
.src a{color:var(--ink-3); text-decoration:underline; text-decoration-color:var(--rule-2); text-underline-offset:2px}
.src a:hover{color:var(--ink)}
.src .k{color:var(--ink-3); text-transform:uppercase; letter-spacing:.14em}

/* ---------- facts / steps ---------- */
.facts{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.facts li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; padding:18px 20px; border-radius:14px; background:var(--card); border:1px solid var(--card-b)}
.facts .n{font-family:"Marcellus",serif; font-size:30px; line-height:1; color:var(--accent-ink)}
.facts h3{font-size:22px; line-height:1.1}
.facts p{font-size:15.5px; color:var(--ink-2); margin-top:6px; line-height:1.55}
table.t{width:100%; border-collapse:collapse; font-size:15px}
table.t th,table.t td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
table.t th{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
table.t td{color:var(--ink-2); line-height:1.5}
table.t td b{color:var(--ink); font-weight:600}
.tscroll{overflow-x:auto}

/* ---------- chips / filters ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{min-height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--rule-2); background:var(--gh-fill); color:var(--ink-2); font:500 14px "IBM Plex Sans",system-ui,sans-serif; cursor:pointer}
.chip:hover{color:var(--ink); border-color:var(--accent)}
.chip[aria-pressed="true"]{color:var(--pr-ink); background:var(--pr-fill); border-color:transparent}

/* ---------- news ---------- */
.tag{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink)}
.tag.business{color:var(--name)}
.tag.event{color:#3b8f4a}
.tag.servers{color:#7a58c9}
.tag.class{color:#b8562a}
.tag.community{color:#2a7f9a}
.tag.guide{color:#6e6a2a}
.tag.korea{color:var(--hot)}
:root[data-theme="asmodian"] .tag.event{color:#7fd48f}
:root[data-theme="asmodian"] .tag.servers{color:#c9b3ff}
:root[data-theme="asmodian"] .tag.class{color:#ffab7f}
:root[data-theme="asmodian"] .tag.community{color:#7fd6ea}
:root[data-theme="asmodian"] .tag.guide{color:#e6e08a}
.ncards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.ncard{display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:var(--card); border:1px solid var(--card-b); color:var(--ink); box-shadow:var(--shadow); transition:border-color .2s ease, transform .2s ease}
.ncard:hover{color:var(--ink); border-color:var(--card-hover); transform:translateY(-2px)}
.ncard .im{position:relative; aspect-ratio:16/9; background:var(--sky)}
.ncard .im svg{display:block; width:100%; height:100%}
.ncard .bd{padding:14px 16px 16px; display:flex; flex-direction:column; flex:1}
.ncard h3{font-size:22px; line-height:1.1; margin-top:6px}
.ncard p{font-size:14.5px; color:var(--ink-2); margin-top:8px; line-height:1.5}
.ncard time{display:block; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3); margin-top:auto; padding-top:12px}
.feed{display:flex; flex-direction:column; gap:12px; margin-top:18px}
.feed .note{display:grid; grid-template-columns:110px minmax(0,1fr); gap:22px; padding:18px 22px; border-radius:14px; background:var(--card); border:1px solid var(--card-b); scroll-margin-top:110px}
.feed .note time{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em; color:var(--ink-3); padding-top:3px}
.feed .note h3{font-size:22px; line-height:1.12; margin-top:6px}
.feed .note p{font-size:15.5px; color:var(--ink-2); margin-top:8px; line-height:1.6}
.feed .note .tags{display:flex; gap:12px; flex-wrap:wrap}
.official{display:grid; gap:10px; margin-top:18px}
.official a.item{display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:18px; align-items:start; padding:14px 18px; border-radius:12px; background:var(--card); border:1px solid var(--card-b); color:var(--ink)}
.official a.item:hover{border-color:var(--card-hover); color:var(--ink)}
.official time{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); padding-top:4px}
.official h3{font-size:19px; line-height:1.15}
.official p{font-size:14.5px; color:var(--ink-2); margin-top:4px; line-height:1.5}
.official .go{font-family:"Marcellus SC","Marcellus",serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); white-space:nowrap; padding-top:4px}

/* ---------- article ---------- */
.ahero{position:relative; overflow:hidden; border-bottom:1px solid var(--rule); background:var(--sky)}
.ahero .plate{position:absolute; right:-40px; top:0; bottom:0; width:min(58%,720px); opacity:.55; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%); mask-image:linear-gradient(90deg,transparent,#000 35%)}
.ahero .plate svg{height:100%; width:auto; float:right}
.ahero .wrap{position:relative; padding-top:20px; padding-bottom:34px}
.ahero h1{font-size:clamp(34px,4.6vw,60px); line-height:1.05; max-width:22ch}
.ahero .dek{font-size:19px; color:var(--ink-2); margin-top:14px; max-width:60ch; line-height:1.55}
.byline{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:16px; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.byline b{color:var(--ink); font-weight:500}
.alayout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start; padding-top:40px}
.prose{max-width:70ch; font-size:17.5px; line-height:1.72}
.prose p{margin:0 0 18px; color:var(--ink-2)}
.prose > p:first-child{font-size:19.5px; color:var(--ink)}
.prose h2{font-size:30px; line-height:1.1; margin:38px 0 14px}
.prose ul,.prose ol{margin:0 0 20px; padding-left:22px; color:var(--ink-2)}
.prose li{margin:8px 0}
.prose strong{color:var(--ink); font-weight:600}
.aside{position:sticky; top:96px; display:grid; gap:12px}
.acard{display:block; padding:16px 18px; border-radius:14px; background:var(--card); border:1px solid var(--card-b); color:var(--ink)}
.acard:hover{color:var(--ink); border-color:var(--card-hover)}
.acard .k{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink)}
.acard h3{font-size:21px; margin-top:4px; line-height:1.15}
.acard p{font-size:14px; color:var(--ink-2); margin-top:4px; line-height:1.5}
.sources{margin-top:34px; padding:18px 20px; border-radius:14px; background:var(--card); border:1px solid var(--card-b); font-size:14.5px}
.sources .k{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.sources ol{margin:8px 0 0; padding-left:22px; color:var(--ink-2)}
.sources li{margin:5px 0; overflow-wrap:anywhere}
.sources li span{color:var(--ink-3); font-size:13px}
.share{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px}
.share .lbl{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-right:4px}
.share a,.share button{display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 13px; border-radius:999px; border:1px solid var(--rule-2); background:var(--gh-fill); color:var(--ink-2); font:500 13.5px "IBM Plex Sans",system-ui,sans-serif; cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--accent); color:var(--ink)}
.share svg{width:15px; height:15px; fill:currentColor; flex:none}
.share [data-native]{display:none}
.share.can-native [data-native]{display:inline-flex}
.share-end{margin:34px 0 0; padding:18px 20px; border-radius:14px; background:var(--card); border:1px solid var(--card-b)}
.share-end h3{font-size:21px}
.share-end .share{margin-top:10px}

/* ---------- classes ---------- */
.ccards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.ccard{padding:18px 20px 16px; border-radius:14px; background:var(--card); border:1px solid var(--card-b); box-shadow:var(--shadow); display:flex; flex-direction:column}
.ccard .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.ccard .glyph{width:44px; height:44px; color:var(--accent-ink)}
.ccard .glyph svg{width:100%; height:100%}
.ccard h3{font-size:24px; line-height:1.05; margin-top:10px}
.ccard .w{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:4px}
.ccard p{font-size:14.5px; color:var(--ink-2); margin-top:10px; line-height:1.55}
.ccard .kr{font-size:13px; color:var(--ink-3); margin-top:auto; padding-top:12px; border-top:1px dashed var(--rule); line-height:1.5}
.ccard .kr b{color:var(--hot); font-weight:600}
.role{display:inline-block; padding:3px 9px; border-radius:999px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--pill-ink); background:var(--pill-bg); border:1px solid var(--pill-b)}

/* ---------- companion CTA ---------- */
.hubcta{border-top:1px solid var(--rule); background:var(--bg-2)}
.hubcta .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; padding-top:40px; padding-bottom:40px}
.hubcta h2{font-size:clamp(26px,3vw,36px); line-height:1.1}
.hubcta p{color:var(--ink-2); margin:10px 0 0; max-width:60ch}
.hubcta .cta-row{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- home strip (added to the concept page) ---------- */
.hubstrip .cards3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px}
.hubstrip .latest{margin-top:22px; display:grid; gap:8px}
.hubstrip .latest a{display:grid; grid-template-columns:100px minmax(0,1fr); gap:14px; padding:12px 16px; border-radius:12px; background:var(--card); border:1px solid var(--card-b); color:var(--ink)}
.hubstrip .latest a:hover{border-color:var(--card-hover)}
.hubstrip .latest time{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); padding-top:2px}
.hubstrip .latest b{font-family:"Marcellus",serif; font-weight:400; font-size:18px; line-height:1.2}

@media (max-width: 900px){
  .phero-in{grid-template-columns:minmax(0,1fr)}
  .phero .plate{max-width:420px; margin:0 auto}
  .keybar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3,.grid4,.hubstrip .cards3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alayout{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
  .ahero .plate{opacity:.28}
}
@media (max-width: 600px){
  .keybar,.grid2,.grid3,.grid4,.hubstrip .cards3{grid-template-columns:minmax(0,1fr)}
  .feed .note,.official a.item,.hubstrip .latest a{grid-template-columns:minmax(0,1fr); gap:6px}
  .official .go{padding-top:0}
  .facts li{grid-template-columns:minmax(0,1fr)}
  .blk{padding:44px 0}
}

/* ---------- official screenshots (NC, via Steam; self-hosted WebP, credited) ---------- */
.credit{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; color:var(--ink-3); margin-top:10px}
.phero .shot{margin:0; width:100%; max-width:560px; margin-left:auto}
.phero .shot img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:16px; border:1px solid var(--card-b); box-shadow:var(--shadow)}
.phero .shot figcaption{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.06em; color:var(--ink-3); margin-top:8px; text-align:right}
.ncard .im img,.acard .im img,.gallery img,.trailer img,.official .thumb{display:block; width:100%; height:100%; object-fit:cover}
.ahero{--ink:#fff; --ink-2:rgba(255,255,255,.86); --ink-3:rgba(255,255,255,.72); --accent-ink:#ffd6dc; color:#fff; min-height:440px; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(10,6,20,.55) 0%, rgba(10,6,20,.62) 45%, rgba(10,6,20,.94) 100%), linear-gradient(90deg, rgba(10,6,20,.6), transparent 70%), var(--img) center/cover no-repeat, #120a1e}
.ahero .wrap{width:100%; padding-top:70px}
.ahero h1{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.ahero .crumbs a,.ahero .crumbs{color:rgba(255,255,255,.75)}
.ahero .eyebrow{color:#ffd6dc}
.ahero .share a,.ahero .share button{background:rgba(10,6,20,.5); border-color:rgba(255,255,255,.3); color:#fff}
.ahero .credit{margin-top:12px}
.gallery{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.gallery a{display:block; aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid var(--card-b); box-shadow:var(--shadow); transition:transform .2s ease}
.gallery a:hover{transform:translateY(-2px)}
.trailers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.trailer{position:relative; display:block; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--card-b); box-shadow:var(--shadow); color:#fff}
.trailer span{position:absolute; left:0; right:0; bottom:0; padding:12px 14px; display:flex; align-items:center; gap:10px; font-family:"Marcellus",serif; font-size:16px; background:linear-gradient(180deg,transparent,rgba(10,6,20,.85))}
.trailer span i{flex:none; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.92); position:relative}
.trailer span i::after{content:""; position:absolute; left:11px; top:8px; border-style:solid; border-width:6px 0 6px 9px; border-color:transparent transparent transparent #120a1e}
.trailer:hover{color:#fff}
.official a.item.has-thumb{grid-template-columns:110px minmax(0,1fr) auto}
.official .thumb{float:right; width:180px; aspect-ratio:16/9; height:auto; margin:0 0 6px 16px; border-radius:8px; border:1px solid var(--card-b)}
.official a.item div::after{content:""; display:block; clear:both}
.hubstrip .acard.pic{padding:0; overflow:hidden}
.hubstrip .acard.pic .im{aspect-ratio:16/9; border-bottom:1px solid var(--card-b)}
.hubstrip .acard.pic .k{margin:14px 18px 0}
.hubstrip .acard.pic h3,.hubstrip .acard.pic p{margin-left:18px; margin-right:18px}
.hubstrip .acard.pic p{margin-bottom:16px}
@media (max-width: 900px){ .gallery{grid-template-columns:repeat(2,minmax(0,1fr))} .trailers{grid-template-columns:minmax(0,1fr)} .ahero{min-height:380px} }
@media (max-width: 600px){ .official .thumb{float:none; width:100%; margin:0 0 10px} .phero .shot{max-width:100%} }