.residents-hero,
.collection-view,
body[data-route='collection'] .brand-header {
  color: #f6f3e9;
  background-color: #101010;
}

.residents-hero {
  --resident-card-width: clamp(215px, min(25vw, 38vh), 350px);
  --resident-ink: #f6f3e9;
  background-image:
    radial-gradient(ellipse at 50% 60%, #422020 0%, #1e1718 38%, transparent 72%),
    repeating-linear-gradient(0deg, #fff0 0 4px, #fff1 5px 5.5px);
  border-bottom: 1px solid #3f3331;
}

.residents-intro .residents-series,
.residents-series {
  margin: 0 0 10px;
  font: 700 10px/1.4 'IBM Plex Mono', 'Courier New', monospace;
  letter-spacing: .13em;
  color: #e9ddd2;
}

.residents-series span { color: #ff4f52; }
.residents-intro p:not(.residents-series) { color: #c5b9b1; }
.residents-archive { border-color: #665958; gap: 14px; }
.residents-archive [data-collection-count] { color: #ffa3a1; font: 700 11px 'Courier New', monospace; }

.resident-card {
  --card-trim: #f1e8da;
  padding: 7px;
  border: 1px solid var(--card-trim);
  border-radius: 13px;
  background: linear-gradient(135deg, #f2e8d7, #9d8985 30%, #241d1e 62%, #ffb5b4 88%, #f7e8ce);
  box-shadow: 0 12px 30px #0008, inset 0 0 0 2px #151015;
  color: #fff6ea;
}

.residents-track .resident-card { cursor: pointer; }
.resident-slide[data-resident-id='nr-002'] .resident-card { --card-trim: #ffaca4; }
.resident-image { border: 1px solid #1b1718; border-radius: 7px; background: #40342f; }
.resident-card::after {
  background: linear-gradient(132deg, #fff8, transparent 20% 84%, #fcc7e77d);
  box-shadow: inset 0 0 0 2px #fff5;
}

.resident-card .resident-image::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at var(--foil-x, 45%) var(--foil-y, 35%), #fff9, transparent 48%),
    repeating-linear-gradient(var(--foil-angle, 130deg), #fd5d9d77, #f7da6b66 8%, #7bf8d077 17%, #759cfa8c 25%, #fd5d9d77 34%);
  mix-blend-mode: screen;
  opacity: .13;
  content: '';
}

.resident-card.is-lit .resident-image::after { opacity: .49; }
.resident-card figcaption {
  inset: auto 7px 7px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 11px 9px;
  border: 0;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, #b52127, #711820 78%, #371719);
  color: #fff6ea;
  text-align: left;
}

.resident-card figcaption strong { font-size: clamp(13px, 1.3vw, 19px); }
.resident-card figcaption span { font: 700 10px 'Courier New', monospace; white-space: nowrap; }
.residents-credit { color: #b5a7a0; }
.residents-controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.residents-transport { justify-self: end; }
.residents-pager button::before { background: #91807e; }
.residents-pager button[aria-current='true']::before { background: #ff5659; }
.residents-transport button { border-color: #77635f; background: #2c2120; }
.residents-transport button:hover:not(:disabled) { background: #4c2b2b; }

.residents-inspect,
.resident-collect,
.resident-flip-button {
  padding: 11px 17px;
  min-height: 44px;
  border: 1px solid #ef514f;
  border-radius: 3px;
  color: #fff7ef;
  background: #af202a;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.residents-inspect:hover, .resident-collect:hover { background: #cc2631; }
.residents-inspect span { margin-inline-start: 7px; }

.collection-page { width: min(91%, 1160px); min-height: 70vh; margin: auto; padding: 38px 0 64px; }
.collection-home { font-size: 13px; color: #e4c5bd; }
.collection-heading { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin: 30px 0 24px; }
.collection-heading h1 { font-size: clamp(39px, 7.1vw, 90px); line-height: 1; letter-spacing: -.06em; }
.collection-heading h1 span { color: #ff5659; }
.collection-progress { display: grid; gap: 4px; text-align: right; font-size: 12px; color: #d2bfb6; white-space: nowrap; }
.collection-progress strong { color: #fff4e9; font: 700 clamp(19px, 3vw, 37px)/1 'Courier New', monospace; }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vw, 38px); }
.collection-slot { min-width: 0; display: grid; align-content: start; gap: 10px; padding: 0; background: none; color: inherit; text-align: left; }
.collection-slot:hover .collection-placeholder { border-color: #ef514f; }
.collection-placeholder {
  box-sizing: content-box;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 7px;
  border: 1px dashed #785853;
  border-radius: 13px;
  background: radial-gradient(ellipse, #352120, #1f1717 75%);
  color: #e1b9ad;
  font: 700 10px/2 'Courier New', monospace;
}
.collection-placeholder b { font-size: clamp(32px, 9vw, 96px); line-height: 1; color: #b24a4a; }
.collection-slot-caption { display: flex; justify-content: space-between; gap: 5px; flex-wrap: wrap; }
.collection-slot-caption span { color: #cba49d; font-size: 11px; }
.collection-foot { margin-top: 26px; color: #c3aca5; font-size: 12px; }

#resident-card-dialog {
  width: min(92%, 700px);
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: clamp(19px, 4vw, 42px);
  border: 1px solid #79615b;
  border-radius: 12px;
  color: #fff6e9;
  background: #201818;
}

#resident-card-dialog:modal { overscroll-behavior: contain; }
#resident-card-dialog::backdrop { background: #080505d4; overflow: hidden; overscroll-behavior: contain; }
.resident-detail-close { display: flex; justify-content: end; margin: -8px -8px 8px; }
.resident-detail-close button { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #372728; color: inherit; font-size: 23px; }
.resident-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 4vw, 40px); align-items: center; }
.resident-flip-stage { perspective: 950px; }
.resident-flip { display: grid; }
.resident-detail-front, .resident-detail-back { grid-area: 1 / 1; }
.resident-detail-back {
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(14px, 3vw, 24px);
  border: 2px solid #e7957e;
  border-radius: 13px;
  background: radial-gradient(ellipse at 70% 28%, #b62c32, #691821 65%, #3d171b);
}
.is-flipped .resident-detail-front { visibility: hidden; }
.is-flipped .resident-detail-back { visibility: visible; }
.resident-back-number { color: #ffcbc0; font: 700 12px 'Courier New', monospace; }
.resident-back-title { margin: 6px 0; font-weight: 800; font-size: clamp(20px, 4.5vw, 34px); }
.resident-back-story { font-size: clamp(12px, 1.8vw, 15px); line-height: 1.7; }
.resident-detail-back small { color: #ffd4c7; font-size: 10px; }
.resident-detail-info h2 { font-size: clamp(32px, 6vw, 65px); line-height: 1.05; }
.resident-detail-edition { margin: 10px 0 20px; color: #d2bfb6; font-size: 13px; }
.resident-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.resident-flip-button, .resident-collect.is-collected { color: #fff6e9; border-color: #82665d; background: #352528; }
.resident-flip-button:hover, .resident-collect.is-collected:hover { background: #493135; }
.resident-collect-status { min-height: 1.6em; margin-top: 10px; font-size: 12px; color: #ffaba2; }
.resident-detail-cardbook { display: inline-block; padding-block: 8px; font-size: 13px; color: #f1c0b4; }
.collection-page :focus-visible, #resident-card-dialog :focus-visible { outline: 2px solid #ff8c82; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .resident-card .resident-image::after { transition: opacity .18s; }
  .resident-flip { transform-style: preserve-3d; transition: transform .48s cubic-bezier(.2,.7,.25,1); }
  .is-flipped .resident-flip { transform: rotateY(180deg); }
  .resident-detail-front, .resident-detail-back { visibility: visible; backface-visibility: hidden; }
  .is-flipped .resident-detail-front { visibility: visible; }
  .resident-detail-back { transform: rotateY(180deg); }
  .resident-detail-front .resident-card { transform: perspective(780px) rotateY(var(--card-tilt-y, 0deg)) rotateX(var(--card-tilt-x, 0deg)); }
  @supports not ((animation-timeline: view()) and (animation-range: entry)) {
    .resident-slide[data-side='center'] .resident-card { transform: perspective(780px) rotateY(var(--card-tilt-y, 0deg)) rotateX(var(--card-tilt-x, 0deg)); }
  }
}

@media (max-width: 620px) {
  .residents-hero { --resident-card-width: clamp(207px, 65vw, 290px); }
  .residents-controls { grid-template-columns: auto 1fr auto; }
  .residents-inspect { justify-self: center; padding-inline: 8px; font-size: 11px; }
  .residents-inspect span { margin-inline-start: 3px; }
  .residents-pager button { min-width: 22px; }
  .residents-transport button { min-width: 30px; }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resident-detail-layout { grid-template-columns: 1fr; }
  .resident-flip-stage { width: min(100%, 230px); margin: auto; }
  .resident-detail-info h2 { font-size: 31px; }
  .resident-detail-edition { margin-bottom: 12px; }
}