:root { --wrap: 1500px; --min: 1064px; --accent: var(--c-artifact); }

main { padding: 0 22px clamp(40px, calc(5 * var(--vw)), 72px); }



.page-head { text-align: center; }


.intro { margin-bottom: clamp(28px, calc(3.4 * var(--vw)), 48px); }

.intro .lede {
max-width: 60em;
margin: 0;
color: var(--bone-dim);
font-size: 14px;
line-height: 1.95;
}



.notice {
display: flex;
align-items: center;
gap: 12px;
margin-top: 24px;
padding: 16px 20px;
background: linear-gradient(90deg, #ffffff07, transparent 70%);
border: 1px solid var(--hair);
border-left: 2px solid var(--note);
}

.notice-body {
order: 1;
margin-left: 8px;
}

.notice .emblem {
flex: none;
width: 32px;
height: 32px;
object-fit: contain;
opacity: .85;
}

.notice-body h3 {
margin: 0 0 4px;
color: var(--bone-dim);
font-family: var(--font-disp);
font-size: 10px;
font-weight: 600;

letter-spacing: .12em;
}

.notice-body p {
margin: 0;
color: var(--bone);
font-size: 14px;
line-height: 1.8;
}


.artifact {
margin-bottom: clamp(30px, calc(3.6 * var(--vw)), 52px);
border: 1px solid var(--hair);
background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
}



.art-bar {
position: sticky;
top: var(--stick);
z-index: 10;
background: var(--ink-lift);
border-bottom: 1px solid var(--hair);
}

.art-head {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 20px;
}


.art-icon {
flex: none;
width: 44px;
height: 44px;
object-fit: cover;
border: 1px solid var(--hair-lit);
}

.art-emblem {
flex: none;
width: 42px;
height: 42px;
object-fit: contain;
}

.art-head h2 {
margin: 0;
color: var(--bone-hi);
font-family: var(--font-cn);
font-size: 19px;
font-weight: 600;
letter-spacing: .05em;
}

.art-head h2 small {
margin-left: 8px;
color: var(--bone-dim);
font-size: .74em;
font-weight: 400;
letter-spacing: .12em;
}

.art-tags {
margin: 0 0 0 auto;
padding-left: 20px;
color: var(--bone-dim);
font-size: 12.5px;
line-height: 1.7;
text-align: right;
}



.tier-rail,
.mod-row {
display: grid;
grid-template-columns: repeat(3, minmax(280px, 1fr));
}

.tier-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
border-left: 1px solid #ffffff0d;
}

.tier-head:first-child { border-left: 0; }

.tier-head .rhombi { color: var(--bone-faint); }

.tier-head .rhombi i.on {
color: var(--accent);
border-color: var(--accent);
}


.tier-head::after {
color: var(--bone-dim);
font-family: var(--font-cn);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .2em;
}

.tier-head[data-tier="1"]::after { content: "一级"; }
.tier-head[data-tier="2"]::after { content: "二级"; }
.tier-head[data-tier="3"]::after { content: "三级"; }









.mod-row {
grid-template-rows: auto auto;
border-top: 1px solid var(--hair);
content-visibility: auto;
contain-intrinsic-height: auto 278px;
}

.mod-row:first-child { border-top: 0; }

.mod {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
grid-template-columns: auto 1fr;
grid-template-areas:
"icon name"
"desc desc";
min-width: 0;

border-left: 1px solid #ffffff0d;
}

.mod[data-tier="1"] { grid-column: 1; border-left: 0; }
.mod[data-tier="2"] { grid-column: 2; }
.mod[data-tier="3"] { grid-column: 3; }

.mod-icon {
grid-area: icon;
align-self: center;
width: 44px;
height: 44px;
object-fit: contain;
padding: 20px 0 4px 22px;
box-sizing: content-box;
}

.mod h4 {
grid-area: name;
align-self: center;
margin: 0;
padding: 20px 22px 4px 14px;
color: var(--bone-hi);
font-family: var(--font-cn);
font-size: 16px;
font-weight: 600;
line-height: 1.6;
letter-spacing: .03em;
overflow-wrap: anywhere;
}



.mod-desc {
grid-area: desc;
align-self: start;
padding: 12px 22px 24px;
font-family: var(--font-read);
font-size: 14px;
font-variant-numeric: tabular-nums;
line-height: 1.75;
overflow-wrap: anywhere;
}

.mod-desc p { margin: 0; }

.mod-desc p + p { margin-top: .85em; }


.mod-desc b { color: var(--bone-hi); font-weight: 600; }

.mod-desc .cond b { color: var(--bone); }