.paper {
  position: relative;
  background-color: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 22px 44px -22px rgba(0, 0, 0, .85);
}
.paper::before, .folder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 300px 300px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.lbl {
  font: 500 9.5px/1.2 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-ink-2);
}
.typed {
  font: 400 17px/1.3 var(--mono);
  color: var(--paper-ink);
  filter: url(#ink);
  overflow-wrap: anywhere;
}
.typed .w { white-space: nowrap; }
.typed i { position: relative; display: inline-block; font-style: normal; white-space: pre; }
.typed i.is-off { visibility: hidden; }
.typed i.is-cur::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.1em; height: 2px; background: var(--red); }
.typed--big { font-size: 25px; line-height: 1.16; letter-spacing: -.01em; }
.typed--sm { font-size: 13.5px; line-height: 1.45; }
.typed--red { color: var(--stamp); }

.btn--ink { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--paper); }
.btn--ink:hover { background: #000; border-color: #000; }
.btn--ink:disabled, .btn--ink:disabled:hover { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--paper); opacity: .3; }
.btn--ink-line:disabled:hover { background: transparent; }
.slip:focus, .pass:focus { outline: none; }
.btn--ink-line { border-color: rgba(30, 31, 34, .55); color: var(--paper-ink); }
.btn--ink-line:hover { background: rgba(30, 31, 34, .08); border-color: var(--paper-ink); }
.btn--ink-line:disabled { border-color: rgba(30, 31, 34, .3); }

.box { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 7px 10px 9px; border: 1px solid var(--paper-line); }
.boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.boxes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.boxes .box + .box { border-left: 0; }
.box--span2 { grid-column: span 2; }
.box--row { flex-direction: row; align-items: baseline; justify-content: space-between; }

.case {
  position: relative;
  display: grid;
  height: var(--case-h, 392px);
  margin-top: 16px;
  perspective: 1400px;
}
.case > * { grid-area: 1 / 1; min-height: 0; }
.folder {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  background: var(--board);
  color: var(--board-ink);
  cursor: pointer;
  transform-origin: 50% 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 22px 44px -22px rgba(0, 0, 0, .85);
  transition: transform 380ms var(--ease), opacity 380ms var(--ease), visibility 0s;
  user-select: none;
}
.folder::after {
  content: '';
  position: absolute;
  left: 0;
  top: -15px;
  width: 42%;
  height: 16px;
  background: var(--board);
  clip-path: polygon(0 100%, 0 0, 88% 0, 100% 100%);
}
.folder:hover { filter: brightness(1.04); }
.folder__print { font: 500 10px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(67, 57, 31, .8); }
.folder__title { display: flex; align-items: baseline; gap: 14px; margin-top: 26px; font: 800 clamp(32px, 9vw, 44px)/1 var(--sans); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.folder__no { flex: 1; min-width: 0; padding: 0 4px 4px; border-bottom: 2px solid rgba(67, 57, 31, .65); font: 400 clamp(26px, 7.4vw, 34px)/1 var(--mono); filter: url(#ink); color: #2a2418; }
.folder__lines { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-top: 30px; }
.folder__line { display: flex; align-items: baseline; gap: 8px; }
.folder__line span:last-child { flex: 1; border-bottom: 1px solid rgba(67, 57, 31, .5); min-height: 1.2em; font: 400 14px/1.2 var(--mono); color: #2a2418; filter: url(#ink); }
.folder__open { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.folder__open .btn { pointer-events: none; }
.folder__hint { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; color: rgba(67, 57, 31, .85); }
.folder__tie { position: absolute; right: -1px; width: 34px; height: 2px; background: #efe7d6; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.folder__tie::before { content: ''; position: absolute; left: -7px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #8f7d55; box-shadow: inset 0 0 0 2px #b9a67c; }
.case.is-open .folder { transform: rotateX(-96deg); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 380ms var(--ease), opacity 380ms var(--ease), visibility 0s 380ms; }

.dossier {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 14px;
  overflow: hidden;
  visibility: hidden;
}
.case.is-open .dossier { visibility: visible; }
.dossier__head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 8px; border-bottom: 3px double rgba(30, 31, 34, .5); }
.dossier__head .lbl:first-child { font-size: 11px; color: var(--paper-ink); letter-spacing: .22em; }
.dossier .box--loc { min-height: 88px; }
.dossier .box--note { flex: 1; min-height: 0; overflow: hidden; }
.dossier__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dossier__foot .btn { min-height: 40px; }
.dossier > .stamp { position: absolute; right: 12px; top: 10px; font-size: 18px; --rot: 5deg; }
.dossier--spy > .stamp { font-size: 24px; top: 6px; }
.dossier--spy .typed--role { color: var(--stamp); }

.stamp {
  display: inline-block;
  padding: .34em .7em .3em;
  border: .13em solid currentColor;
  box-shadow: inset 0 0 0 .09em var(--paper), inset 0 0 0 .17em currentColor;
  color: var(--stamp);
  font: 850 22px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(var(--rot, -6deg));
  mix-blend-mode: multiply;
  opacity: .88;
  -webkit-mask-image: var(--wear);
  mask-image: var(--wear);
  -webkit-mask-size: 240px 120px;
  mask-size: 240px 120px;
  pointer-events: none;
}
.stamp--big { font-size: clamp(24px, 7.4vw, 40px); }
.stamp--ink { color: #23262f; }
.stamp.is-slam { animation: slam 300ms cubic-bezier(.25, 1.5, .5, 1) both; }
@keyframes slam {
  0% { transform: scale(1.9) rotate(calc(var(--rot, -6deg) - 8deg)); opacity: 0; }
  55% { opacity: .95; }
  100% { transform: scale(1) rotate(var(--rot, -6deg)); opacity: .88; }
}

.redact { display: inline-block; height: 1.02em; margin: 0 .28em .18em 0; vertical-align: -.16em; background: #141414; }

.sheet {
  --row: 36px;
  padding: 14px 16px 18px 50px;
  background-image:
    linear-gradient(to right, transparent 43px, rgba(196, 54, 44, .55) 43px, rgba(196, 54, 44, .55) 44px, transparent 44px),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row) - 1px), rgba(64, 104, 160, .26) calc(var(--row) - 1px), rgba(64, 104, 160, .26) var(--row));
  background-position: 0 0, 0 14px;
}
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; height: var(--row); padding-left: 8px; }
.sheet__list { columns: 2; column-gap: 26px; }
.sheet__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  height: var(--row);
  padding: 0 0 0 8px;
  border: 0;
  background: none;
  text-align: left;
  break-inside: avoid;
  font: 400 14.5px/var(--row) var(--mono);
  color: var(--paper-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet__item .n { flex: none; width: 2.1em; font-size: 10.5px; color: var(--paper-ink-2); }
.sheet__item .t { overflow: hidden; text-overflow: ellipsis; filter: url(#ink); }
button.sheet__item:hover .t { text-decoration: underline; text-decoration-color: rgba(30, 31, 34, .35); text-underline-offset: 4px; }
.sheet__item.is-struck .t, .sheet__item.is-struck .n { opacity: .45; }
.sheet__item.is-pick { background: rgba(196, 54, 44, .12); box-shadow: inset 3px 0 0 var(--stamp); }
.sheet__item.is-pick .t { color: var(--stamp); opacity: 1; }
.sheet__item.is-pick .n { opacity: 1; }
.sheet__item.is-pick .pencil { display: none; }
.pencil { position: absolute; left: calc(1.6em + 8px); right: 0; top: 50%; width: calc(100% - 1.6em - 8px); height: 16px; margin-top: -8px; overflow: visible; pointer-events: none; }
.pencil path { fill: none; stroke: #c43a2e; stroke-width: 2.1; stroke-linecap: round; opacity: .9; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pencil 280ms ease-out forwards; }
@keyframes pencil { to { stroke-dashoffset: 0; } }
.pencil.is-still path { animation: none; stroke-dashoffset: 0; }
@media (min-width: 1240px) { .round .sheet__list { columns: 3; column-gap: 20px; } .round .sheet__item { font-size: 13.5px; } }

.flaps { display: inline-flex; align-items: center; gap: .07em; font: 500 1em/1 var(--mono); }
.flap {
  position: relative;
  display: inline-block;
  width: .82em;
  height: 1.24em;
  color: var(--ink);
  perspective: 3em;
}
.flap > b {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  font-weight: 500;
  background: #121211;
  backface-visibility: hidden;
}
.flap > b > span { display: block; height: 1.24em; line-height: 1.24em; text-align: center; }
.flap > .t, .flap > .lt { top: 0; border-bottom: 1px solid #050505; }
.flap > .b, .flap > .lb { bottom: 0; background: #0e0e0d; }
.flap > .b > span, .flap > .lb > span { transform: translateY(-50%); }
.flap > .lt { z-index: 2; transform-origin: 50% 100%; animation: flapT 110ms ease-in forwards; }
.flap > .lb { z-index: 2; transform-origin: 50% 0; transform: rotateX(90deg); animation: flapB 110ms 110ms ease-out forwards; }
@keyframes flapT { to { transform: rotateX(-90deg); } }
@keyframes flapB { to { transform: rotateX(0deg); } }
.flaps__sep { width: .36em; text-align: center; color: var(--ink-3); }
.flaps--red .flap { color: var(--red); }
.flaps--dim .flap { color: var(--ink-3); }

.idt { position: relative; flex: none; width: 40px; height: 40px; background: #0f0f0e; overflow: hidden; }
.idt svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.idt b { position: absolute; inset: 0; display: grid; place-items: center; font: 500 13px/1 var(--mono); letter-spacing: .04em; color: var(--ink); text-shadow: 0 0 2px #0f0f0e, 0 0 5px #0f0f0e, 0 0 8px #0f0f0e; }

.report { padding: 22px 20px 24px; transform: rotate(-.35deg); }
.report__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 3px double rgba(30, 31, 34, .5); }
.report__no { font: 400 clamp(21px, 6.4vw, 30px)/1.1 var(--mono); white-space: nowrap; filter: url(#ink); }
.report__verdict { position: relative; min-height: 118px; display: flex; align-items: center; justify-content: center; margin: 6px 0 4px; }
.report__fields { display: grid; gap: 0; }
.report__fields .box + .box { border-top: 0; }
.report__table { width: 100%; margin-top: 14px; border-collapse: collapse; font: 400 13.5px/1.35 var(--mono); }
.report__table th { padding: 6px 8px; border-bottom: 1px solid var(--paper-line); text-align: left; font: 500 9.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-ink-2); }
.report__table td { padding: 7px 8px; border-bottom: 1px dashed rgba(30, 31, 34, .18); vertical-align: baseline; }
.report__table td:last-child, .report__table th:last-child { text-align: right; }
.report__table .is-spy td { color: var(--stamp); }
.report__table .pts { font-weight: 500; }

.slip { padding: 18px 18px 26px; }
.slip__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--paper-line); }
.slip__q { font: 750 26px/1.15 var(--sans); letter-spacing: -.015em; margin: 4px 0 14px; }
.slip .boxes { margin-bottom: 14px; }
.slip__bar { height: 3px; margin-top: 16px; background: rgba(30, 31, 34, .15); }
.slip__bar i { display: block; height: 100%; background: var(--paper-ink); transform-origin: 0 50%; }

.pass { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 22px; }
.pass__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 3px double rgba(30, 31, 34, .5); }
.pass__head .lbl:first-child { font-size: 11px; letter-spacing: .22em; color: var(--paper-ink); }
.pfield { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px; border: 1px solid var(--paper-line); cursor: text; }
.pfield:focus-within { border-color: var(--paper-ink); }
.pfield input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 22px/1.2 var(--mono);
  color: var(--paper-ink);
  caret-color: var(--red);
  filter: url(#ink);
}
.pfield input::placeholder { color: rgba(30, 31, 34, .3); }
.pass__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pass__row .btn { min-height: 100%; }
.pass__or { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.pass__or::before, .pass__or::after { content: ''; flex: 1; border-top: 1px dashed rgba(30, 31, 34, .3); }
.pass__foot { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed rgba(30, 31, 34, .3); }
.pass__foot .typed { font-size: 14px; margin-right: auto; }
.pass__sign { width: 34%; border-bottom: 1px solid rgba(30, 31, 34, .45); }
.pass > .stamp { position: absolute; right: 30px; bottom: 12px; font-size: 14px; --rot: -8deg; opacity: .82; }

.pass__acc { margin-top: -4px; font: 400 12px/1.45 var(--mono); color: var(--paper-ink-2); }
.pass__acc b { font-weight: 500; color: var(--paper-ink); overflow-wrap: anywhere; }
.pass__link { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; font: 500 12px/1.45 var(--mono); color: var(--paper-ink); cursor: pointer; }
.pass__link:hover { color: #000; }