:root {
  --ink: #030304;
  --panel: #09090b;
  --panel-2: #111114;
  --line: rgba(255, 255, 255, .16);
  --muted: #a4a4aa;
  --text: #e4e4e7;
  --bright: #ffffff;
  --red: #c80020;
  --red-soft: #ff2447;
  --serif: "Cinzel", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(115deg, transparent 0 54%, rgba(200, 0, 32, .055) 54% 54.2%, transparent 54.2%),
    linear-gradient(245deg, transparent 0 66%, rgba(255, 255, 255, .025) 66% 66.15%, transparent 66.15%),
    radial-gradient(circle at 14% 6%, rgba(200, 0, 32, .22), transparent 27rem),
    radial-gradient(circle at 88% 72%, rgba(200, 0, 32, .12), transparent 32rem),
    #030304;
  font-family: var(--sans);
  line-height: 1.55;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.025) 50%, transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(255,255,255,.018) 50%, transparent calc(50% + 1px));
  background-size: 96px 96px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  z-index: -1;
}

.ambient { position: fixed; pointer-events: none; opacity: .18; transform: rotate(38deg); border: 1px solid rgba(255,36,71,.35); }
.ambient-one { width: 460px; height: 460px; left: -330px; top: 18vh; }
.ambient-two { width: 520px; height: 520px; right: -390px; top: 52vh; }

.masthead {
  height: 94px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.identity { display: flex; gap: 16px; align-items: center; color: inherit; text-decoration: none; }
.identity small { display: block; color: var(--muted); font-size: .65rem; letter-spacing: .2em; margin-bottom: 2px; }
.identity strong { font: 600 1.02rem var(--serif); color: var(--bright); letter-spacing: .035em; }
.sigil { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--red-soft); transform: rotate(45deg); position: relative; box-shadow: 0 0 22px rgba(200,0,32,.18); }
.sigil i, .sigil b, .sigil em { position: absolute; display: block; background: var(--red-soft); }
.sigil i { width: 2px; height: 23px; }
.sigil b { width: 23px; height: 2px; }
.sigil em { width: 8px; height: 8px; background: var(--ink); border: 1px solid var(--red-soft); }
.archive-status { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.archive-status span { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--red-soft); box-shadow: 0 0 12px var(--red); margin-right: 8px; }

main { max-width: 1280px; margin: 0 auto; padding: 0 5vw; }
.intro {
  min-height: 440px;
  padding: 105px 0 80px;
  display: grid;
  grid-template-columns: 1.6fr .8fr;
  gap: 9vw;
  align-items: end;
}
.eyebrow, .section-index { color: var(--red-soft); font-size: .67rem; font-weight: 600; letter-spacing: .22em; }
h1 { font: 500 clamp(2.7rem, 5.5vw, 5rem)/1.05 var(--serif); color: var(--bright); margin: 18px 0 0; letter-spacing: -.025em; }
h1 span { color: #c7c7ca; }
.lede { color: #a6a4a2; max-width: 420px; margin: 0 0 10px; font-size: 1rem; }

.registry { border-top: 1px solid var(--line); padding: 58px 0 96px; }
.registry-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 34px; }
.section-index { margin: 0 0 9px; }
h2 { font: 600 clamp(1.7rem, 3vw, 2.5rem) var(--serif); color: var(--bright); margin: 0; }
.count { color: var(--muted); font-size: .79rem; letter-spacing: .06em; text-transform: uppercase; }
.count strong { color: var(--bright); font: 600 1.2rem var(--serif); margin-right: 4px; }

.controls { display: flex; gap: 18px; flex-direction: column; align-items: stretch; margin-bottom: 30px; }
.search { height: 46px; width: min(410px, 100%); display: flex; align-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.02); padding: 0 15px; }
.search span { width: 14px; height: 14px; border: 1.5px solid #87858a; border-radius: 50%; margin-right: 13px; position: relative; }
.search span::after { content: ""; position: absolute; width: 6px; height: 1.5px; background: #87858a; transform: rotate(45deg); right: -5px; bottom: -3px; }
.search input { width: 100%; border: 0; outline: 0; background: none; color: var(--bright); font: 400 .88rem var(--sans); }
.search input::placeholder { color: #6e6c70; }
.filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.filter { min-height: 48px; border: 1px solid var(--line); background: transparent; color: #918f93; padding: 10px 14px; cursor: pointer; font: 500 .72rem var(--sans); letter-spacing: .04em; transition: .2s ease; }
.filter:hover, .filter.active { color: var(--bright); border-color: var(--red-soft); background: rgba(200,0,32,.18); }

.title-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.title-card {
  min-height: 240px;
  padding: 31px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  color: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
  animation: card-entry .42s both;
  animation-delay: calc(var(--order) * 35ms);
}
.title-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red-soft); transform: scaleY(0); transition: transform .25s ease; box-shadow: 0 0 20px rgba(255,36,71,.55); }
.title-card::after { content: ""; position: absolute; width: 90px; height: 1px; right: -22px; top: 25px; background: var(--red); transform: rotate(45deg); opacity: .42; }
.title-card:hover { background: linear-gradient(145deg, rgba(200,0,32,.13), rgba(255,255,255,.025)); border-color: rgba(255,255,255,.28); transform: translateY(-2px); }
.title-card:hover::before { transform: scaleY(1); }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.roman { font: 600 .83rem var(--serif); color: var(--red-soft); }
.tag { font-size: .63rem; text-transform: uppercase; letter-spacing: .15em; color: #88868a; padding: 5px 8px; border: 1px solid var(--line); }
.title-card h3 { font: 600 1.35rem var(--serif); color: var(--bright); margin: 0 0 10px; }
.title-card p { color: #969499; margin: 0; font-size: .84rem; max-width: 88%; }
.card-arrow { position: absolute; right: 28px; bottom: 24px; color: #666469; font-size: 1.1rem; transition: .2s ease; }
.title-card:hover .card-arrow { color: var(--red-soft); transform: translateX(3px); }
.empty { text-align: center; padding: 70px 20px; border: 1px solid var(--line); }
.empty span { font: 600 1.7rem var(--serif); color: var(--red-soft); }
.empty h3 { font: 600 1.15rem var(--serif); color: var(--bright); margin: 12px 0 5px; }
.empty p { color: var(--muted); margin: 0; font-size: .84rem; }

footer { max-width: 1440px; margin: 0 auto; padding: 27px 5vw; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: #67656a; font-size: .61rem; letter-spacing: .16em; }

dialog {
  width: min(620px, calc(100% - 32px));
  border: 1px solid var(--red-soft);
  border-radius: 0;
  background: linear-gradient(145deg, #151519, #070708 72%);
  color: var(--text);
  padding: 52px;
  box-shadow: 0 0 0 1px #000, 0 30px 100px rgba(0,0,0,.88), 0 0 42px rgba(200,0,32,.2);
  overflow: hidden;
}
dialog::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, transparent, var(--red-soft), #fff, var(--red-soft), transparent); }
dialog[open] { animation: title-open .38s cubic-bezier(.2,.8,.2,1) both; }
dialog[open]::backdrop { animation: backdrop-open .3s ease both; }
dialog::backdrop { background: rgba(0,0,0,.86); backdrop-filter: blur(8px); }
.close-dialog { position: absolute; right: 20px; top: 17px; background: none; color: #8e8c91; border: 0; font-size: 1.7rem; cursor: pointer; }
.dialog-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--red-soft); color: #fff; font: 600 1rem var(--serif); margin-bottom: 35px; transform: rotate(45deg); box-shadow: 0 0 25px rgba(200,0,32,.28); }
.dialog-mark::first-letter { transform: rotate(-45deg); }
.dialog-type { color: var(--red-soft); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; }
.dialog-title { margin: 9px 0 18px; }
.dialog-summary { color: #aaa8ac; font-size: .92rem; margin: 0 0 35px; }

@keyframes title-open {
  0% { opacity: 0; transform: translateY(20px) scale(.94); clip-path: inset(48% 0 48% 0); }
  55% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 0 0 0); }
}
@keyframes backdrop-open { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-entry { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
dl { margin: 0; border-top: 1px solid var(--line); }
dl div { display: grid; grid-template-columns: 120px 1fr; border-bottom: 1px solid var(--line); padding: 15px 0; }
dt { color: #77757a; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
dd { margin: 0; color: var(--bright); font-size: .82rem; }

@media (max-width: 850px) {
  .intro { grid-template-columns: 1fr; gap: 35px; padding: 80px 0 64px; min-height: 0; }
  .controls { align-items: stretch; flex-direction: column; }
  .search { width: 100%; }
  .title-grid { grid-template-columns: 1fr; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .masthead { height: 80px; }
  .archive-status { display: none; }
  .identity strong { font-size: .9rem; }
  .identity small { font-size: .55rem; }
  .intro { padding-top: 64px; }
  h1 { font-size: 2.35rem; }
  .registry-head { align-items: start; gap: 20px; flex-direction: column; }
  .count { margin: 0; }
  .filters { grid-template-columns: 1fr; }
  .filter { padding: 9px 8px; }
  .title-card { min-height: 225px; padding: 25px; }
  footer { flex-direction: column; gap: 4px; }
  dialog { padding: 38px 27px; }
  dl div { grid-template-columns: 92px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}