:root {
  color-scheme: dark;
  --bg: #03030a;
  --panel: rgba(13, 15, 31, .82);
  --panel-strong: rgba(15, 19, 42, .94);
  --text: #f7f8ff;
  --muted: #b9bed2;
  --line: rgba(179, 196, 255, .22);
  --cyan: #72d9ff;
  --blue: #7ba5ff;
  --violet: #b988ff;
  --glow: rgba(116, 124, 255, .34);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 15%, rgba(58, 107, 255, .16), transparent 30rem),
    radial-gradient(circle at 83% 8%, rgba(160, 78, 255, .16), transparent 28rem),
    radial-gradient(circle at 50% 100%, rgba(69, 214, 255, .08), transparent 35rem),
    linear-gradient(180deg, #050713 0%, #03030a 58%, #010104 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.62) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(120,190,255,.5) 0 1px, transparent 1.3px);
  background-size: 97px 97px, 151px 151px;
  background-position: 19px 13px, 41px 67px;
  mask-image: linear-gradient(to bottom, #000, transparent 68%);
}

a { color: inherit; }
img { max-width: 100%; }

.site-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.topbar {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}

.brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .02em;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.brand-mark {
  width: 33px;
  aspect-ratio: 1;
  border: 1px solid rgba(216, 228, 255, .5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 0 24px rgba(119, 166, 255, .22);
  background: rgba(255,255,255,.035);
  font-size: 18px;
}

.navlinks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.navlinks a {
  text-decoration: none;
  color: var(--muted);
  border: 1px solid transparent;
  padding: 9px 13px;
  border-radius: 999px;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.navlinks a:hover, .navlinks a:focus-visible {
  color: white;
  background: rgba(255,255,255,.055);
  border-color: var(--line);
  transform: translateY(-1px);
  outline: none;
}

.hero {
  text-align: center;
  padding: clamp(64px, 10vw, 120px) 0 42px;
}
.eyebrow {
  margin: 0 0 12px;
  color: #c2cdf5;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .73rem;
  font-weight: 700;
}
.hero h1, .character-head h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: .018em;
  line-height: .95;
  text-shadow: 0 0 32px rgba(115, 147, 255, .22);
  background: linear-gradient(110deg, #fff 15%, #bfe8ff 46%, #d7b8ff 80%, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1 { font-size: clamp(3rem, 8vw, 6.8rem); }
.hero p {
  width: min(650px, 100%);
  margin: 20px auto 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: clamp(.98rem, 2vw, 1.08rem);
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 22px 0 90px;
}
.character-card {
  min-height: 490px;
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: #090b16;
  text-decoration: none;
  box-shadow: 0 28px 70px rgba(0,0,0,.36);
  isolation: isolate;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.character-card:hover, .character-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(180, 205, 255, .55);
  box-shadow: 0 32px 80px rgba(0,0,0,.46), 0 0 42px var(--glow);
  outline: none;
}
.character-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
}
.character-card:hover img, .character-card:focus-visible img { transform: scale(1.025); filter: saturate(1.05) brightness(1.04); }
.character-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(2,3,10,.2) 54%, rgba(2,3,10,.97) 100%);
  z-index: 1;
}
.card-copy {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: 26px;
}
.card-copy small {
  color: #c9d0e7;
  text-transform: uppercase;
  letter-spacing: .19em;
  font-weight: 700;
  font-size: .68rem;
}
.card-copy h2 {
  margin: 7px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4rem);
}
.card-copy span { color: var(--muted); }

.character-head {
  padding: clamp(50px, 8vw, 90px) 0 34px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}
.character-head h1 { font-size: clamp(3.2rem, 7.8vw, 6.4rem); }
.character-head .meta { color: var(--muted); padding-bottom: 8px; white-space: nowrap; }

.gallery {
  padding: 34px 0 90px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
.gallery-item {
  grid-column: span 6;
  margin: 0;
  border: 1px solid var(--line);
  background: rgba(6, 8, 18, .8);
  border-radius: 22px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 55px rgba(0,0,0,.3);
  cursor: zoom-in;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.gallery-item:hover, .gallery-item:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(177, 199, 255, .48);
  box-shadow: 0 25px 65px rgba(0,0,0,.38), 0 0 32px rgba(97, 105, 255, .14);
  outline: none;
}
.gallery-item.wide { grid-column: span 12; }
.gallery-item.portrait { grid-column: span 6; }
.gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: linear-gradient(145deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.gallery-item.wide img { max-height: 730px; }
.gallery-item.portrait img { max-height: 980px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(0,0,0,.9);
  backdrop-filter: blur(12px);
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: min(96vw, 2000px);
  max-height: 92vh;
  object-fit: contain;
  filter: drop-shadow(0 28px 80px rgba(0,0,0,.7));
}
.lightbox button {
  position: fixed;
  top: 20px;
  right: 22px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  color: white;
  background: rgba(20,20,30,.7);
  font-size: 24px;
  cursor: pointer;
}
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255,255,255,.16); outline: none; }

.footer {
  color: #868ca2;
  border-top: 1px solid var(--line);
  padding: 26px 0 34px;
  font-size: .86rem;
  text-align: center;
}

@media (max-width: 780px) {
  .site-shell { width: min(100% - 22px, 1180px); }
  .topbar { min-height: 68px; }
  .brand span:last-child { display: none; }
  .navlinks a { padding: 8px 10px; }
  .hero { padding-top: 54px; }
  .character-grid { grid-template-columns: 1fr; }
  .character-card { min-height: 440px; }
  .character-head { align-items: start; flex-direction: column; }
  .character-head .meta { padding: 0; }
  .gallery { gap: 12px; }
  .gallery-item, .gallery-item.portrait, .gallery-item.wide { grid-column: span 12; min-height: 220px; }
  .lightbox { padding: 10px; }
}

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


/* Character profile additions */
.character-grid.all-characters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.character-card.profile-card { min-height: 405px; }
.character-card.profile-card.no-art {
  background:
    radial-gradient(circle at 50% 25%, rgba(114,217,255,.13), transparent 12rem),
    radial-gradient(circle at 70% 70%, rgba(185,136,255,.12), transparent 14rem),
    linear-gradient(145deg, rgba(16,21,48,.96), rgba(5,7,19,.98));
}
.placeholder-sigil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5rem, 9vw, 8rem);
  color: rgba(207,225,255,.11);
  text-shadow: 0 0 40px rgba(125,153,255,.18);
  letter-spacing: -.08em;
}
.card-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:13px; }
.card-action {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 12px; border-radius:999px; border:1px solid rgba(185,202,255,.24);
  background:rgba(255,255,255,.04); color:#dfe8ff; font-size:.8rem;
}
.profile-layout {
  display:grid;
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,5vw,64px);
  padding:clamp(48px,8vw,92px) 0 46px;
  align-items:start;
}
.profile-art {
  position:sticky; top:26px;
  border:1px solid var(--line); border-radius:28px; overflow:hidden;
  background:linear-gradient(145deg, rgba(19,24,50,.9), rgba(6,8,20,.96));
  min-height:520px; box-shadow:0 28px 80px rgba(0,0,0,.4), 0 0 45px rgba(94,110,255,.10);
  display:grid; place-items:center;
}
.profile-art img { width:100%; height:100%; max-height:800px; object-fit:cover; display:block; }
.profile-art.placeholder { min-height:560px; }
.profile-art .monogram {
  width:180px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(190,211,255,.22); color:rgba(228,238,255,.25);
  font-family:Georgia,"Times New Roman",serif; font-size:5rem;
  box-shadow:inset 0 0 55px rgba(110,142,255,.06), 0 0 55px rgba(123,95,255,.09);
}
.profile-copy { padding-top:8px; }
.profile-copy h1 {
  margin:0 0 12px; font-family:Georgia,"Times New Roman",serif; font-weight:400;
  font-size:clamp(3rem,7vw,6.5rem); line-height:.93;
  background:linear-gradient(110deg,#fff 10%,#bfe8ff 48%,#d7b8ff 82%,#fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.profile-kicker { color:#c1c9e1; font-size:clamp(.96rem,2vw,1.08rem); line-height:1.5; }
.profile-facts { display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 34px; }
.fact-chip {
  border:1px solid var(--line); border-radius:999px; padding:8px 12px;
  background:rgba(255,255,255,.035); color:#d9def0; font-size:.85rem;
}
.profile-quote {
  position:relative; margin:8px 0 34px; padding:24px 26px 22px 34px; overflow:hidden;
  border:1px solid rgba(170,198,255,.2); border-radius:20px;
  background:linear-gradient(135deg,rgba(98,139,255,.08),rgba(160,101,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.profile-quote .quote-mark {
  position:absolute; left:11px; top:-13px; font-family:Georgia,"Times New Roman",serif;
  font-size:5.4rem; line-height:1; color:rgba(182,205,255,.16); pointer-events:none;
}
.profile-quote blockquote {
  position:relative; margin:0; color:#e6e9f5; font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.08rem,2.25vw,1.34rem); font-style:italic; line-height:1.65;
}
.profile-quote .quote-attribution { margin-top:12px; color:#9da9c9; font-size:.86rem; letter-spacing:.035em; }
.profile-section { border-top:1px solid var(--line); padding:28px 0 4px; }
.profile-section h2 { margin:0 0 13px; font-family:Georgia,"Times New Roman",serif; font-size:1.55rem; font-weight:400; }
.profile-section p { margin:0; color:var(--muted); line-height:1.85; font-size:1rem; }
.profile-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.primary-button, .secondary-button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  padding:12px 17px; border-radius:999px; transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.primary-button { border:1px solid rgba(164,202,255,.52); background:linear-gradient(135deg,rgba(93,151,255,.17),rgba(169,99,255,.16)); color:#fff; }
.secondary-button { border:1px solid var(--line); background:rgba(255,255,255,.035); color:#cfd5e7; }
.primary-button:hover,.primary-button:focus-visible,.secondary-button:hover,.secondary-button:focus-visible { transform:translateY(-2px); border-color:rgba(217,229,255,.7); outline:none; }
.gallery-empty {
  margin:34px 0 90px; min-height:420px; border:1px solid var(--line); border-radius:28px;
  display:grid; place-items:center; text-align:center; padding:40px;
  background:radial-gradient(circle at 50% 35%, rgba(117,163,255,.12), transparent 18rem), rgba(5,8,19,.72);
  box-shadow:0 24px 65px rgba(0,0,0,.3);
}
.gallery-empty .moon { font-size:4.5rem; color:rgba(212,226,255,.35); text-shadow:0 0 36px rgba(132,155,255,.22); }
.gallery-empty h2 { font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:2rem; margin:12px 0 8px; }
.gallery-empty p { color:var(--muted); max-width:540px; line-height:1.7; margin:0 auto 22px; }
.profile-link-row { margin:-6px 0 28px; display:flex; justify-content:flex-end; }

@media (max-width: 980px) {
  .character-grid.all-characters { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .profile-layout { grid-template-columns:1fr; }
  .profile-art { position:relative; top:auto; min-height:420px; }
  .profile-art img { max-height:720px; object-fit:contain; }
}
@media (max-width: 650px) {
  .character-grid.all-characters { grid-template-columns:1fr; }
  .character-card.profile-card { min-height:360px; }
  .profile-layout { padding-top:38px; }
  .profile-art, .profile-art.placeholder { min-height:360px; }
}


/* Trademark lockup */
.tm-mark {
  font-size: .42em;
  line-height: 1;
  vertical-align: super;
  margin-left: .12em;
  color: #cfe7ff;
  text-shadow: 0 0 10px rgba(154,190,255,.35);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
}
.footer .tm-mark { font-size: .56em; }

/* Dynamic character CMS gallery */
.era-filters{display:flex;gap:9px;flex-wrap:wrap;padding:24px 0 2px}.era-filter{border:1px solid var(--line);background:#0c1127;color:#dce5fb;border-radius:999px;padding:9px 14px;cursor:pointer}.era-filter.active{border-color:#8fb1ff;background:#1c2d59}.gallery-image-wrap{position:relative;width:100%;height:100%;display:flex}.gallery-label{position:absolute;left:14px;bottom:14px;background:rgba(5,7,19,.84);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 11px;font-size:.82rem;backdrop-filter:blur(8px)}.gallery-item{flex-direction:column}.gallery-item figcaption{width:100%;padding:12px 15px;border-top:1px solid var(--line);color:var(--muted)}.gallery-item figcaption span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#b6c8ff}.gallery-item figcaption p{margin:5px 0 0}.lightbox-content{max-width:96vw;max-height:92vh;text-align:center}.lightbox-copy{color:white;margin-top:10px}.lightbox-copy p{color:#c7ccdb}.empty-gallery{grid-column:1/-1;padding:60px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:20px}

/* Per-artwork attribution: visible without covering the illustration. */
.gallery-item figcaption .art-credit{display:block;margin-top:8px;font-size:.73rem;line-height:1.4;letter-spacing:0;text-transform:none;color:#9aa9c4}
.art-credit a{color:inherit;text-underline-offset:3px;text-decoration-color:rgba(173,194,235,.45)}
.art-credit a:hover,.art-credit a:focus-visible{color:#e1e9ff;text-decoration-color:currentColor}
.lightbox-artist .art-credit{display:block;margin-top:8px;font-size:.82rem;color:#bbc8e3}

/* A compact second artist profile link, without an overlay or a new gallery row. */
.art-credit-separator{opacity:.62;margin:0 2px}
.art-credit-secondary{display:inline-block;max-width:min(32ch,46vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}