/* The prep "dossier": an illustration of Raydar's interview prep that sparks
   curiosity without giving the content away (David, 2026-09-24). Three
   round briefs fan out, most lines stay redacted, a few highlighted labels
   show the kind of thing inside, and the front brief cycles through rounds.
   Theme with --dos-* on the host element. Pure CSS plus shared/js/dossier.js. */
.dossier {
  --dos-paper: #FFFDF8;
  --dos-ink: #0F0F0F;
  --dos-muted: rgba(15, 15, 15, .14);
  --dos-muted-2: rgba(15, 15, 15, .08);
  --dos-hi: #CFC9FF;          /* violet highlighter on paper */
  --dos-hi-2: #FFD2AD;        /* orange highlighter on paper */
  --dos-stamp: #574EA9;
  --dos-shadow: 0 1px 2px rgba(15,15,15,.05), 0 30px 60px -30px rgba(15,15,15,.35);
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 5 / 5.2;
  margin-inline: auto;
  perspective: 1400px;
}
.dossier__sheet {
  position: absolute; inset: 6% 16% 7% 16%;
  border-radius: 18px;
  background: var(--dos-paper);
  color: var(--dos-ink);
  box-shadow: var(--dos-shadow);
  padding: 7% 8%;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 5%;
  transform-origin: 50% 110%;
  transition: transform .9s cubic-bezier(.2,.7,.1,1), opacity .6s;
  overflow: hidden;
}
.dossier__sheet--2 { transform: rotate(-6deg) translate(-5%, 2%); opacity: .92; }
.dossier__sheet--3 { transform: rotate(6deg) translate(5%, 3%); opacity: .86; }
.dossier:not(.is-in) .dossier__sheet--2, .dossier:not(.is-in) .dossier__sheet--3 { transform: none; }
.dossier__tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 12px/1.2 var(--rd-font-ui, Inter, sans-serif); text-transform: uppercase; color: rgba(15,15,15,.55); }
.dossier__round { font: 400 clamp(22px, 3.2vw, 34px)/1.05 var(--rd-font-display, Georgia, serif); color: var(--dos-ink); text-transform: none; }
.dossier__faces { display: flex; gap: 6px; }
.dossier__faces span { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgba(15,15,15,.35) 0 22%, transparent 23%), radial-gradient(circle at 50% 100%, rgba(15,15,15,.3) 0 45%, transparent 46%), var(--dos-muted-2); filter: blur(.4px); }
.dossier__lines { display: grid; align-content: start; gap: 9px; }
.dossier__line { height: 9px; border-radius: 5px; background: var(--dos-muted); }
.dossier__line--short { width: 58%; }
.dossier__line--mid { width: 78%; }
.dossier__mark { position: relative; display: inline-block; width: max-content; max-width: 100%; margin: 4px 0; padding: 3px 8px; border-radius: 4px; font: 500 13px/1.3 var(--rd-font-ui, Inter, sans-serif); color: var(--dos-ink); background: linear-gradient(90deg, var(--dos-hi) 0 var(--sweep, 100%), transparent var(--sweep, 100%)); }
.dossier__mark--orange { --dos-hi: var(--dos-hi-2); }
.dossier__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dossier__stamp { font: 500 11px/1 var(--rd-font-ui, Inter, sans-serif); text-transform: uppercase; color: var(--dos-stamp); border: 1.5px solid currentColor; border-radius: 999px; padding: 6px 10px; transform: rotate(-4deg); }
.dossier__steps { display: flex; gap: 5px; }
.dossier__steps i { width: 18px; height: 4px; border-radius: 2px; background: var(--dos-muted); }
.dossier__steps i.is-on { background: var(--dos-ink); }
.dossier__label { position: absolute; left: 50%; bottom: .5%; transform: translateX(-50%); font: 500 12px/1 var(--rd-font-ui, Inter, sans-serif); color: rgba(15,15,15,.55); white-space: nowrap; }
.dossier--dark .dossier__label { color: rgba(246,243,233,.6); }
.dossier .dossier__front-content { transition: opacity .35s; }
.dossier.is-swapping .dossier__front-content { opacity: 0; }
.dossier.is-in .dossier__mark { animation: dossier-sweep 1.4s .5s cubic-bezier(.2,.7,.1,1) both; }
@keyframes dossier-sweep { from { --sweep: 0%; background-size: 0 100%; } to { --sweep: 100%; } }
@property --sweep { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@media (prefers-reduced-motion: reduce) {
  .dossier__sheet { transition: none; }
  .dossier.is-in .dossier__mark { animation: none; }
}
/* Keep the fanned briefs inside the illustration's own box on every width. */
/* (No clipping: at these fan angles the briefs stay inside the box.) */
@media (max-width: 600px) {
  .dossier__sheet { inset: 5% 14% 7% 14%; }
  .dossier__sheet--2 { transform: rotate(-5deg) translate(-4%, 2%); }
  .dossier__sheet--3 { transform: rotate(5deg) translate(4%, 3%); }
}