/*
 * Suits & Silencers dossier styles.
 * Everything is intentionally scoped beneath .rita-suits-active / .rita-suits-wrap
 * so the ordinary Rabbit in the Attic site is untouched.
 */

body.rita-suits-active {
  --rita-paper: #f1efe8;
  --rita-paper-2: #e7e3d9;
  --rita-ink: #111722;
  --rita-muted: #59616b;
  --rita-line: #b9b7ae;
  --rita-accent: #214a5a;
  --rita-danger: #6c2024;
  --rita-shadow: rgba(0,0,0,.22);
}

.rita-suits-wrap {
  width: min(1180px, calc(100% - 32px));
  margin: 42px auto 64px;
  padding: clamp(24px, 4vw, 54px);
  color: var(--rita-ink);
  background:
    linear-gradient(rgba(255,255,255,.37), rgba(255,255,255,.17)),
    repeating-linear-gradient(0deg, rgba(30,30,30,.016) 0, rgba(30,30,30,.016) 1px, transparent 1px, transparent 4px),
    var(--rita-paper);
  box-shadow: 0 18px 50px var(--rita-shadow);
  border: 1px solid rgba(255,255,255,.3);
  box-sizing: border-box;
  font-family: Georgia, 'Times New Roman', serif;
}

.rita-suits-wrap *, .rita-suits-wrap *::before, .rita-suits-wrap *::after { box-sizing: border-box; }
.rita-suits-wrap a { color: var(--rita-accent); }
.rita-suits-wrap a:hover { color: var(--rita-danger); }

.rita-kicker,
.rita-call-sign,
.rita-fact-table dt,
.rita-character-card__eyebrow,
.rita-archive-tools span,
.rita-dossier-accordions summary,
.rita-timeline,
.rita-universe-tile__mark {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.rita-breadcrumbs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:28px;
  font-size:.9rem;
  color:var(--rita-muted);
}

.rita-universe-header { margin-bottom: 26px; }
.rita-kicker { font-size: .76rem; color: var(--rita-muted); margin-bottom: 8px; }
.rita-back-link { display:inline-block; margin-top:18px; text-decoration:none; }

.rita-dossier {
  border-top: 1px solid var(--rita-line);
}

.rita-dossier-hero {
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(260px, .65fr);
  gap:clamp(28px,5vw,70px);
  padding:38px 0 28px;
  align-items:start;
}

.rita-dossier-heading h1,
.rita-archive-header h1 {
  margin:0;
  font-size:clamp(2.5rem,6vw,5.3rem);
  line-height:.92;
  font-weight:500;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--rita-ink);
}
.rita-archive-header h1 { text-transform:none; font-size:clamp(2.4rem,5vw,4.5rem); }
.rita-call-sign { margin-top:10px; font-size:1rem; }

.rita-profile-quote {
  margin:38px 0 12px;
  max-width:620px;
  padding-left:18px;
  border-left:3px solid var(--rita-line);
  font-style:italic;
  color:#28313a;
}
.rita-profile-quote p { font-size:clamp(1.1rem,2vw,1.45rem); margin:0 0 8px; }
.rita-profile-quote cite { color:var(--rita-muted); }

.rita-dossier-portrait img,
.rita-dossier-portrait__empty {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  filter:saturate(.7) contrast(1.04);
  border:1px solid #9b9a94;
  box-shadow:7px 8px 0 rgba(20,25,31,.08);
}
.rita-dossier-portrait__empty {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:#cbc8bf;
  color:#3d4650;
  font-family:'IBM Plex Mono','Courier New',monospace;
}
.rita-dossier-portrait__empty span { font-size:4rem; }

.rita-fact-section { border-top:1px solid var(--rita-line); border-bottom:1px solid var(--rita-line); }
.rita-fact-table { margin:0; }
.rita-fact-row {
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:20px;
  padding:9px 0;
  border-bottom:1px solid rgba(120,120,115,.35);
}
.rita-fact-row:last-child { border-bottom:0; }
.rita-fact-table dt { font-size:.73rem; color:#37404a; }
.rita-fact-table dd { margin:0; font-family:'IBM Plex Mono','Courier New',monospace; font-size:.9rem; }

.rita-dossier-columns {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  gap:52px;
  padding:34px 0;
  border-bottom:1px solid var(--rita-line);
}
.rita-dossier h2,
.rita-featured-files h2,
.rita-section-heading h2 {
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin:0 0 15px;
}
.rita-prose { line-height:1.64; }
.rita-prose p:first-child { margin-top:0; }
.rita-skill-list { margin:0; padding-left:1.25rem; line-height:1.7; }

.rita-timeline-section { padding:30px 0 34px; border-bottom:1px solid var(--rita-line); overflow:hidden; }
.rita-timeline {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(125px,1fr));
  position:relative;
  gap:14px;
  margin-top:25px;
}
.rita-timeline::before {
  content:'';
  position:absolute;
  left:0; right:0; top:7px;
  height:1px;
  background:#717780;
}
.rita-timeline-item { position:relative; padding-top:25px; text-align:center; text-transform:none; letter-spacing:0; font-family:'IBM Plex Mono','Courier New',monospace; }
.rita-timeline-dot { position:absolute; top:3px; left:50%; width:9px; height:9px; border-radius:50%; transform:translateX(-50%); background:var(--rita-ink); }
.rita-timeline-item strong,.rita-timeline-item span,.rita-timeline-item small{display:block}
.rita-timeline-item strong{font-size:.8rem}
.rita-timeline-item span{font-size:.83rem;margin-top:4px}
.rita-timeline-item small{font-size:.7rem;color:var(--rita-muted);margin-top:5px;line-height:1.3}

.rita-dossier-accordions { padding:28px 0; }
.rita-dossier-accordions details { border:1px solid #aaa9a3; margin:0 0 8px; background:rgba(255,255,255,.18); }
.rita-dossier-accordions summary { cursor:pointer; padding:13px 16px; font-size:.78rem; font-weight:700; }
.rita-dossier-accordions summary span { float:right; font-size:.67rem; color:var(--rita-muted); font-weight:400; }
.rita-details-body { padding:4px 20px 18px; line-height:1.6; }
.rita-spoilers { border-color:rgba(108,32,36,.45)!important; background:rgba(108,32,36,.07)!important; }
.rita-spoilers summary { color:var(--rita-danger); }

.rita-dossier-nav {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding-top:20px;
  border-top:1px solid var(--rita-line);
  font-size:.9rem;
}
.rita-dossier-nav div:last-child { text-align:right; }

.rita-archive-header { max-width:780px; margin-bottom:32px; }
.rita-archive-header p { font-size:1.1rem; line-height:1.55; color:#444c55; }
.rita-archive-tools {
  display:grid;
  grid-template-columns:2fr 1fr 1fr auto;
  gap:12px;
  padding:18px;
  margin-bottom:28px;
  border-top:1px solid var(--rita-line);
  border-bottom:1px solid var(--rita-line);
  background:rgba(255,255,255,.2);
}
.rita-archive-tools label { display:flex; flex-direction:column; gap:6px; }
.rita-archive-tools span { font-size:.66rem; color:var(--rita-muted); }
.rita-archive-tools input,.rita-archive-tools select,.rita-archive-tools button {
  min-height:42px;
  padding:8px 10px;
  border:1px solid #aaa9a3;
  background:#f8f6ef;
  color:var(--rita-ink);
  border-radius:0;
  font:inherit;
}
.rita-archive-tools button { align-self:end; cursor:pointer; background:var(--rita-ink); color:#fff; border-color:var(--rita-ink); }

.rita-character-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.rita-character-card {
  background:rgba(255,255,255,.24);
  border:1px solid #b5b2aa;
  min-width:0;
}
.rita-character-card[hidden] { display:none!important; }
.rita-character-card__image { display:block; aspect-ratio:4/3; overflow:hidden; background:#c7c4bb; }
.rita-character-card__image img { width:100%; height:100%; object-fit:cover; filter:saturate(.72); transition:transform .22s ease, filter .22s ease; }
.rita-character-card:hover .rita-character-card__image img { transform:scale(1.025); filter:saturate(.9); }
.rita-character-card__placeholder { width:100%; height:100%; display:grid; place-items:center; color:#303741; font:3rem 'IBM Plex Mono','Courier New',monospace; }
.rita-character-card__body { padding:18px; }
.rita-character-card__eyebrow { font-size:.66rem; color:var(--rita-muted); margin-bottom:5px; }
.rita-character-card h2 { margin:0 0 9px; font-size:1.55rem; line-height:1.04; text-transform:none; letter-spacing:-.02em; }
.rita-character-card h2 a { color:var(--rita-ink); text-decoration:none; }
.rita-character-card p { color:#4d555d; line-height:1.45; font-size:.92rem; }
.rita-text-link { font-family:'IBM Plex Mono','Courier New',monospace; font-size:.75rem; text-decoration:none; }
.rita-no-results { text-align:center; padding:40px; font-style:italic; }

.rita-universe-copy { max-width:760px; margin-bottom:34px; }
.rita-universe-links { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin:28px 0 50px; }
.rita-universe-tile { min-height:170px; padding:20px; border:1px solid var(--rita-line); text-decoration:none; color:var(--rita-ink)!important; display:flex; flex-direction:column; background:rgba(255,255,255,.22); }
.rita-universe-tile:hover { transform:translateY(-2px); box-shadow:0 7px 20px rgba(0,0,0,.07); }
.rita-universe-tile__mark { color:var(--rita-muted); font-size:.68rem; margin-bottom:auto; }
.rita-universe-tile strong { font-size:1.35rem; }
.rita-universe-tile small { margin-top:8px; color:var(--rita-muted); line-height:1.4; }
.rita-universe-tile--disabled { opacity:.55; }
.rita-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:16px; border-bottom:1px solid var(--rita-line); }

@media (max-width: 900px) {
  .rita-dossier-hero,.rita-dossier-columns { grid-template-columns:1fr; }
  .rita-dossier-portrait { max-width:420px; }
  .rita-character-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rita-archive-tools { grid-template-columns:1fr 1fr; }
  .rita-archive-tools label:first-child { grid-column:1/-1; }
  .rita-universe-links { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 620px) {
  .rita-suits-wrap { width:100%; margin:0; padding:24px 18px 42px; box-shadow:none; }
  .rita-dossier-heading h1 { font-size:2.65rem; }
  .rita-fact-row { grid-template-columns:1fr; gap:3px; }
  .rita-character-grid { grid-template-columns:1fr; }
  .rita-archive-tools { grid-template-columns:1fr; }
  .rita-archive-tools label:first-child { grid-column:auto; }
  .rita-universe-links { grid-template-columns:1fr; }
  .rita-dossier-nav { grid-template-columns:1fr; text-align:center; }
  .rita-dossier-nav div:last-child { text-align:center; }
  .rita-timeline { grid-template-columns:1fr; }
  .rita-timeline::before { left:5px; right:auto; top:0; bottom:0; height:auto; width:1px; }
  .rita-timeline-item { text-align:left; padding:0 0 18px 28px; }
  .rita-timeline-dot { left:5px; top:5px; }
}