# Viewer Template: Dossier

## What
Intelligence report. You are reading a classified briefing that happens to have images.

## When to Use
- Evidence-heavy analysis with data tables, entity lists, confidence ratings
- Structured intelligence pieces — think RAND Corporation, Goldman Sachs research notes
- Investigations where the STRUCTURE of the information is part of the argument
- When the reader needs to cross-reference, compare, and verify claims
- Content with named entities, timelines, risk assessments, causal chains

## Design Philosophy
The dossier template inverts the image-text relationship. The image is evidence — contained in a frame, bordered, labeled. The text is the analyst's assessment — structured, classified, dense. The aesthetic is a classified briefing that landed on your desk: charcoal background, amber highlights for key data, crimson for warnings. Every element exists to organize intelligence, not to decorate.

## Layout System

### Image Treatment
- Contained in a frame — NOT full-bleed. 60% width, centered or left-aligned
- Subtle border: 1px solid rgba(212,168,67,0.3) — the evidence frame
- Box shadow: `0 4px 20px rgba(0,0,0,0.4)` — lifted off the surface
- Label below image: exhibit number, source, date (mono font, 0.7rem, amber)
- No Ken Burns — evidence does not drift. Static, precise, documentarian.

### Text Treatment
- Right column (40%), structured like a report
- Section headers in monospace caps: `ASSESSMENT`, `KEY FINDINGS`, `ENTITY PROFILE`
- Bullet points with em-dash prefix, not round dots
- Data tables inline: bordered, alternating row colors
- Classification stamps: top-right corner, rotated 12deg, 40% opacity
- Confidence ratings per panel: `[HIGH]` in green, `[MEDIUM]` in amber, `[LOW]` in crimson
- Entity sidebar: scrollable list of key players mentioned in this panel

### Typography
- **Headers:** IBM Plex Mono, 0.8rem, letter-spacing 0.2em, text-transform uppercase, amber (#D4A843)
- **Body:** Crimson Pro, 1.0rem, line-height 1.75, #d4d4d4
- **Data/tables:** IBM Plex Mono, 0.8rem, #b0b0b0
- **Classification stamps:** IBM Plex Mono, 1.2rem, rgba(200,60,60,0.35)
- **Confidence tags:** IBM Plex Mono, 0.7rem, bold

### Color Approach
- Background: dark charcoal (#141418) — not pure black, not blue-black
- Text: cool grey (#d4d4d4)
- Accent primary: amber (#D4A843) — headers, accent lines, key data
- Warning: crimson (#C0392B) — low confidence, risk indicators, warnings
- Success: muted green (#2ECC71 at 80% opacity) — high confidence markers
- Table rows: alternating #1a1a20 / #141418
- Border: rgba(212,168,67,0.2) for frames and dividers

### Transitions
- Cut: 0.3s — no crossfade, no page-flip. Intelligence reports don't dissolve. They turn.
- Optional: slide-left (next dossier page sliding in from right)

## Presentation Block
```json
{
  "layout": "narrator",
  "show_speaker_badge": false,
  "image_sizing": "contain",
  "text_position": "side-right",
  "transition": "cut",
  "typewriter_speed": 15,
  "viewer_style": "dossier",
  "image_max_width": "60%"
}
```

## Key CSS Patterns

```css
/* Dossier background */
.dossier-viewport {
  background: #141418;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 0;
}

/* Evidence frame */
.evidence-frame {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.evidence-image {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border: 1px solid rgba(212, 168, 67, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.evidence-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: #D4A843;
  margin-top: 0.8rem;
  letter-spacing: 0.1em;
}

/* Classification stamp */
.classification-stamp {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.2rem;
  color: rgba(200, 60, 60, 0.35);
  transform: rotate(12deg);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  border: 2px solid rgba(200, 60, 60, 0.25);
  padding: 0.3rem 1rem;
  pointer-events: none;
  z-index: 5;
}

/* Report section headers */
.section-header {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #D4A843;
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(212, 168, 67, 0.2);
}

/* Confidence ratings */
.confidence-high {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(46, 204, 113, 0.8);
  padding: 0.1rem 0.4rem;
  border: 1px solid rgba(46, 204, 113, 0.3);
}
.confidence-medium {
  color: #D4A843;
  border-color: rgba(212, 168, 67, 0.3);
}
.confidence-low {
  color: #C0392B;
  border-color: rgba(192, 57, 43, 0.3);
}

/* Data table */
.intel-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: #b0b0b0;
  margin: 1rem 0;
}
.intel-table th {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid rgba(212, 168, 67, 0.3);
  color: #D4A843;
  font-weight: 500;
}
.intel-table tr:nth-child(even) { background: #1a1a20; }
.intel-table tr:nth-child(odd)  { background: #141418; }
.intel-table td { padding: 0.4rem 0.6rem; }

/* Entity sidebar */
.entity-sidebar {
  margin-top: 1rem;
  padding: 0.8rem;
  border: 1px solid rgba(212, 168, 67, 0.15);
  border-radius: 4px;
  background: rgba(20, 20, 24, 0.8);
}
.entity-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
  margin: 0.15rem;
  border: 1px solid rgba(212, 168, 67, 0.25);
  border-radius: 2px;
  color: #b0b0b0;
}
```

## Common Mistakes
- Making images full-bleed — this is not a magazine. Evidence is framed, labeled, contained
- Skipping classification stamps — they create the intelligence aesthetic even if decorative
- Round bullet points — use em-dash (---) or arrow (>) prefixes. Round dots are too casual
- Forgetting confidence ratings — every assessment panel should declare its confidence level
- Making the entity sidebar too prominent — it is reference material, not the main event
- Colorful design — this template uses exactly 3 accent colors: amber, crimson, muted green. Nothing else.
- Ken Burns on evidence images — evidence does not drift. Static. Precise. Fixed.

## Reference
Path to the HTML reference template: `viewer-templates/dossier.html`