.armory-hero h1 { font-size: var(--t-3xl); margin: 6px 0 10px; }
.armory-hero .lede { color: var(--ink-2); font-size: var(--t-md); max-width: 64ch; }
.ar-toc { display: flex; flex-wrap: wrap; gap: 2px; }
.ar-toc button {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 4px; border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer;
  font-family: var(--f-ui); font-weight: 700; font-size: var(--t-xs); color: var(--ink-2);
}
.ar-toc button:not(:has(.portrait)) { padding-left: 10px; }
.ar-toc button:hover { background: var(--ground-2); color: var(--brass-hi); }

.shelf { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + 76px); }
.shelf:first-child { border-top: 0; margin-top: var(--s-5); }
.shelf-head { position: sticky; top: calc(var(--bar-h) + 84px); align-self: start; display: grid; justify-items: start; gap: 12px; }
.shelf-head h2 { font-size: var(--t-2xl); line-height: 1.1; text-wrap: balance; }
.shelf-head h2 .num { font-size: .58em; color: var(--brass); vertical-align: .38em; margin-left: 2px; }
.shelf-head p { color: var(--ink-3); font-family: var(--f-ui); font-size: var(--t-sm); margin-top: 2px; }
.shelf-head p b { color: var(--ink); }
.shelf-face { border-radius: 50%; }
.shelf-glyph { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--ground-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--brass); }
.shelf-glyph .ic { width: 26px; height: 26px; }

.item-grid { columns: 290px; column-gap: 18px; }
.item-grid > .item { break-inside: avoid; margin-bottom: 18px; }
.item {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-2);
  background: var(--paper); color: #2a1d10; scroll-margin-top: calc(var(--bar-h) + 90px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 0 0 1px rgba(90, 60, 20, .2), var(--shadow-2);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2);
}
.item:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 0 0 1px rgba(90, 60, 20, .28), var(--shadow-3); }
.item.flash { animation: item-flash 1.8s var(--ease); }
@keyframes item-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--brass-glint), var(--shadow-3); } }
.item-plate { height: 150px; display: grid; place-items: center; border-bottom: 1px dashed rgba(90, 60, 20, .28); background: radial-gradient(ellipse at 50% 58%, rgba(255, 255, 255, .4), transparent 70%); }
.item-plate img { max-width: 78%; max-height: 132px; object-fit: contain; mix-blend-mode: multiply; }
.item-body { display: grid; gap: 9px; align-content: start; padding: 14px 16px 16px; }
.item h3 { font-family: var(--f-display); font-size: 1.32rem; line-height: 1.15; color: #2a1d10; text-wrap: balance; }
.item-flag { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 2px; font-family: var(--f-ui-sc); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; color: #8a5a14; }
.item-flag .ic { width: 13px; height: 13px; fill: currentColor; }
.item-meta { margin-top: 3px; font-family: var(--f-ui-sc); font-weight: 700; font-size: 11.5px; letter-spacing: .07em; color: #6b5a40; }
.item-meta .attune { display: inline-flex; align-items: center; gap: 3px; }
.item-meta .ic { width: 12px; height: 12px; }
.item a { color: #7a4a0c; }
.item-props { font-size: var(--t-sm); line-height: 1.52; color: #3b2d1b; display: grid; gap: 7px; }
.item-props p + p { margin-top: 0; }                     
.rules-table { width: 100%; border-collapse: collapse; font-size: .95em; font-variant-numeric: tabular-nums; }
.rules-table th { text-align: left; font-weight: 700; border-bottom: 1px solid rgba(90, 60, 20, .35); padding: 2px 6px 3px 0; }
.rules-table td { padding: 1px 6px 1px 0; border-bottom: 1px dotted rgba(90, 60, 20, .18); }

.shelf-items { min-width: 0; }
.relic-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 880px)); gap: 18px; align-items: start; margin-bottom: 18px; }
.item.relic { grid-template-columns: 230px minmax(0, 1fr); grid-template-rows: none; }
.item.relic .item-body { max-width: 74ch; padding: 18px 22px 20px; }
.item.relic .item-plate { height: auto; min-height: 210px; border-bottom: 0; border-right: 1px dashed rgba(90, 60, 20, .28); }
.item.relic .item-plate img { max-height: 190px; max-width: 86%; }
.item.relic h3 { font-size: 1.6rem; }

.shelf.lore .item { background: color-mix(in srgb, var(--paper) 86%, var(--ground)); }
.shelf.lore .item-plate img { filter: grayscale(.5) sepia(.3); opacity: .85; }
.shelf.lore .item::after {
  content: "Not held"; position: absolute; right: 14px; top: 14px; padding: 3px 10px; border: 1.5px solid rgba(156, 47, 40, .6); border-radius: 4px;
  font-family: var(--f-ui-sc); font-weight: 700; font-size: 12px; letter-spacing: .12em; color: rgba(156, 47, 40, .8); transform: rotate(4deg);
}

@media (max-width: 1000px) {
  .shelf { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .shelf-head { position: static; display: flex; align-items: center; gap: 16px; }
}
@media (max-width: 720px) {
  .item.relic { grid-template-columns: minmax(0, 1fr); }
  .item.relic .item-plate { min-height: 170px; border-right: 0; border-bottom: 1px dashed rgba(90, 60, 20, .28); }
}