/* SUBJECT: FELICIA — procedural bones, worn skin.
   Manila + redaction-black + CLASSIFIED-red. Aged, handled, carried. */

:root {
  --manila: #e8d9ae;
  --manila-dark: #d9c58f;
  --manila-shadow: #b8a069;
  --paper: #f4ecd8;
  --paper-aged: #ece0c4;
  --ink: #2b2620;
  --ink-faded: #4a4238;
  --stamp-red: #b3261e;
  --redact: #1a1713;
  --pencil: #6b6156;
  --desk: #3a3129;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--desk);
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.04), transparent 60%),
    repeating-linear-gradient(87deg, transparent 0 2px, rgba(0,0,0,0.06) 2px 4px);
  min-height: 100vh;
  font-family: 'Courier Prime', monospace;
  color: var(--ink);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.hidden { display: none !important; }

/* ------------ paper grain ------------ */
.folder-cover, .file-paper, .file-tab, .buried-slip {
  position: relative;
}
.folder-cover::before, .file-paper::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(2deg, transparent 0 3px, rgba(120,90,40,0.03) 3px 4px),
    repeating-linear-gradient(92deg, transparent 0 5px, rgba(120,90,40,0.025) 5px 6px);
  pointer-events: none;
  border-radius: inherit;
}

/* ------------ coffee rings ------------ */
.coffee-ring {
  position: absolute;
  border-radius: 50%;
  border: 7px solid rgba(101, 67, 33, 0.14);
  box-shadow: 0 0 4px rgba(101,67,33,0.08), inset 0 0 3px rgba(101,67,33,0.10);
  pointer-events: none;
}
.cr-cover { width: 110px; height: 105px; top: 24px; right: 40px; transform: rotate(-8deg) scaleX(1.05); }
.cr-page  { width: 90px;  height: 86px;  bottom: 60px; right: 30px; transform: rotate(14deg); }

/* ============ COVER ============ */
.cover {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 24px;
  cursor: pointer;
}
.folder-cover {
  background: linear-gradient(160deg, var(--manila) 0%, var(--manila-dark) 100%);
  width: min(560px, 94vw);
  padding: 70px 44px 90px;
  border-radius: 4px 14px 4px 4px;
  box-shadow:
    0 1px 0 var(--manila-shadow),
    3px 4px 0 rgba(0,0,0,0.25),
    6px 9px 22px rgba(0,0,0,0.5);
  transform: rotate(-1.2deg);
  transition: transform 0.25s ease;
}
.cover:hover .folder-cover { transform: rotate(-0.4deg) scale(1.01); }
.folder-tab-top {
  position: absolute; top: -16px; left: 34px;
  width: 150px; height: 18px;
  background: var(--manila);
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.08);
}
.cover-text { text-align: center; position: relative; }
.cover-agency {
  font-family: 'Special Elite', monospace;
  font-size: 0.72rem; letter-spacing: 0.22em;
  color: var(--ink-faded);
  border-top: 1.5px solid var(--ink-faded);
  border-bottom: 1.5px solid var(--ink-faded);
  padding: 6px 0; margin-bottom: 26px;
}
.cover-case-no { font-size: 0.85rem; letter-spacing: 0.14em; color: var(--ink-faded); margin-bottom: 20px; }
.cover-subject {
  font-family: 'Special Elite', monospace;
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.cover-status { font-size: 1.05rem; letter-spacing: 0.1em; margin-bottom: 44px; }
.cover-status .typed { border-bottom: 2px solid var(--ink); padding: 0 6px; }
.cover-instruction {
  font-size: 0.75rem; letter-spacing: 0.2em; color: var(--ink-faded);
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }

.classified-stamp {
  position: absolute; top: 36px; left: 50%;
  transform: translateX(-50%) rotate(-12deg);
  font-family: 'Special Elite', monospace;
  font-size: 1.5rem; letter-spacing: 0.3em;
  color: var(--stamp-red);
  border: 4px double var(--stamp-red);
  padding: 4px 18px;
  opacity: 0.82;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.string-tie {
  position: absolute; bottom: 26px; left: 50%;
  width: 30px; height: 30px; margin-left: -15px;
  border: 2.5px solid #8a7550;
  border-radius: 50%;
  background: radial-gradient(circle, #c9b487 40%, #a8905e 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.string-tie::after {
  content: "";
  position: absolute; top: 12px; left: -60px;
  width: 130px; height: 22px;
  border-bottom: 2px solid rgba(90,70,40,0.7);
  border-radius: 50%;
  transform: rotate(-6deg);
}

/* ============ FOLDER INTERIOR ============ */
.folder {
  width: min(640px, 96vw);
  padding: 28px 8px 60px;
}
.folder-header {
  text-align: center;
  color: var(--paper-aged);
  margin-bottom: 28px;
  font-family: 'Special Elite', monospace;
}
.header-line { font-size: 0.95rem; letter-spacing: 0.12em; }
.header-sub { font-size: 0.68rem; letter-spacing: 0.16em; opacity: 0.65; margin-top: 6px; }

.file-stack { display: flex; flex-direction: column; gap: 16px; }

.file-tab {
  background: linear-gradient(170deg, var(--paper) 0%, var(--paper-aged) 100%);
  border-radius: 3px;
  padding: 20px 22px 18px;
  box-shadow: 2px 3px 0 rgba(0,0,0,0.22), 4px 6px 14px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform 0.18s ease;
  overflow: hidden;
}
.file-tab:nth-child(odd)  { transform: rotate(-0.6deg); }
.file-tab:nth-child(even) { transform: rotate(0.5deg); }
.file-tab:hover:not(.locked) { transform: rotate(0deg) translateX(6px); }

/* paper chip at top of each file — Bray's touch */
.file-tab .chip {
  position: absolute; top: 0; right: 26px;
  background: var(--manila-dark);
  font-family: 'Special Elite', monospace;
  font-size: 0.62rem; letter-spacing: 0.14em;
  padding: 3px 12px 2px;
  border-radius: 0 0 6px 6px;
  color: var(--ink-faded);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.12);
}

.file-tab .tab-day {
  font-family: 'Special Elite', monospace;
  font-size: 0.7rem; letter-spacing: 0.2em;
  color: var(--stamp-red);
  margin-bottom: 6px;
}
.file-tab .tab-witness {
  font-family: 'Special Elite', monospace;
  font-size: 1.25rem; letter-spacing: 0.08em;
}
.file-tab .tab-status {
  margin-top: 8px;
  font-size: 0.72rem; letter-spacing: 0.14em;
  color: var(--pencil);
}

.file-tab.locked { cursor: not-allowed; filter: saturate(0.75) brightness(0.92); }
.file-tab.locked .tab-witness { color: var(--ink-faded); }
.file-tab.locked::after {
  content: "SEALED";
  position: absolute; top: 50%; right: 20px;
  transform: translateY(-50%) rotate(-8deg);
  font-family: 'Special Elite', monospace;
  font-size: 1rem; letter-spacing: 0.24em;
  color: var(--stamp-red);
  border: 3px double var(--stamp-red);
  padding: 2px 10px;
  opacity: 0.7;
}
.file-tab.filed::after {
  content: "FILED";
  position: absolute; top: 50%; right: 20px;
  transform: translateY(-50%) rotate(6deg);
  font-family: 'Special Elite', monospace;
  font-size: 1rem; letter-spacing: 0.24em;
  color: var(--ink);
  border: 3px double var(--ink);
  padding: 2px 10px;
  opacity: 0.55;
}
.file-tab.sealed-special {
  background: linear-gradient(170deg, #ddd0b0 0%, #cbbb92 100%);
  border: 1.5px solid rgba(90,60,30,0.35);
}
.file-tab.shake { animation: deny 0.35s ease; }
@keyframes deny {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

/* ============ OPEN FILE ============ */
.file-view {
  position: fixed; inset: 0;
  background: rgba(20,16,12,0.88);
  display: flex; justify-content: center; align-items: flex-start;
  overflow-y: auto;
  padding: 30px 12px 60px;
  z-index: 50;
}
.file-paper {
  background: linear-gradient(175deg, var(--paper) 0%, var(--paper-aged) 90%);
  width: min(760px, 96vw);
  min-height: 70vh;
  border-radius: 3px;
  padding: 60px 40px 70px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  position: relative;
}
.paper-clip {
  position: absolute; top: -12px; left: 44px;
  width: 22px; height: 55px;
  border: 3.5px solid #8b8b8b;
  border-radius: 10px 10px 6px 6px;
  border-bottom: none;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}
.close-file {
  position: absolute; top: 16px; right: 18px;
  background: none; border: 1.5px solid var(--ink-faded);
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem; letter-spacing: 0.14em;
  color: var(--ink-faded);
  padding: 6px 12px; cursor: pointer;
}
.close-file:hover { background: rgba(0,0,0,0.05); }

.file-columns { display: flex; gap: 30px; }
.file-photo-col { flex: 0 0 200px; }
.file-text-col { flex: 1; min-width: 0; }

.case-photo {
  background: #fff;
  padding: 10px 10px 34px;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.3);
  transform: rotate(-2.5deg);
  margin-bottom: 22px;
}
.case-photo img { width: 100%; display: block; filter: sepia(0.15) contrast(1.02); }
.photo-placeholder {
  height: 170px;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #ddd 0 12px, #d0d0d0 12px 24px);
  font-family: 'Special Elite', monospace;
  font-size: 0.8rem; letter-spacing: 0.2em;
  color: #777; text-align: center;
}
.clue-object {
  font-family: 'Caveat', cursive;
  font-size: 1.05rem;
  color: var(--pencil);
  transform: rotate(-1.5deg);
  border: 1.5px dashed var(--pencil);
  padding: 8px 12px;
  border-radius: 3px;
}

.witness-label {
  font-family: 'Special Elite', monospace;
  font-size: 0.95rem; letter-spacing: 0.06em;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 10px; margin-bottom: 22px;
}
.witness-body p { margin-bottom: 16px; line-height: 1.65; font-size: 0.95rem; }
.witness-body h3 {
  font-family: 'Special Elite', monospace;
  font-size: 0.9rem; letter-spacing: 0.1em;
  margin: 22px 0 10px;
}
.witness-body ul { margin: 0 0 16px 20px; }
.witness-body li { margin-bottom: 10px; line-height: 1.6; font-size: 0.93rem; }
.witness-body em { font-style: italic; }
.witness-signoff {
  margin-top: 30px;
  font-family: 'Special Elite', monospace;
  font-size: 1rem;
  text-align: right;
}

/* ------------ redaction bars ------------ */
.redacted {
  position: relative;
  cursor: pointer;
}
.redacted .redact-bar {
  position: absolute; inset: -2px -4px;
  background: var(--redact);
  border-radius: 2px;
  transition: opacity 0.5s ease, transform 0.5s ease;
  display: flex; align-items: center; justify-content: center;
}
.redacted .redact-bar::after {
  content: "SWIPE TO DECLASSIFY";
  font-family: 'Special Elite', monospace;
  color: rgba(244,236,216,0.4);
  font-size: 0.62rem; letter-spacing: 0.3em;
}
.redacted.revealed .redact-bar {
  opacity: 0;
  transform: translateX(30px) skewX(-12deg);
  pointer-events: none;
}

/* ------------ the FILED stamp ------------ */
.file-stamp {
  position: fixed;
  top: 50%; left: 50%;
  font-family: 'Special Elite', monospace;
  font-size: clamp(3rem, 12vw, 5.5rem);
  letter-spacing: 0.25em;
  color: var(--stamp-red);
  border: 10px double var(--stamp-red);
  padding: 10px 40px 10px 50px;
  z-index: 100;
  pointer-events: none;
  mix-blend-mode: normal;
  transform: translate(-50%,-50%) rotate(-14deg) scale(3);
  opacity: 0;
}
.file-stamp.thunk {
  animation: stamp-thunk 0.55s cubic-bezier(0.25, 1.4, 0.4, 1) forwards;
}
@keyframes stamp-thunk {
  0%   { transform: translate(-50%,-50%) rotate(-14deg) scale(3); opacity: 0; }
  60%  { transform: translate(-50%,-50%) rotate(-14deg) scale(0.96); opacity: 1; }
  75%  { transform: translate(-50%,-50%) rotate(-14deg) scale(1.05); }
  100% { transform: translate(-50%,-50%) rotate(-14deg) scale(1); opacity: 1; }
}
.file-stamp.fade { transition: opacity 0.4s ease 0.5s; opacity: 0 !important; }

/* ------------ final ruling ------------ */
.final-ruling {
  margin-top: 40px;
  border: 2.5px solid var(--ink);
  padding: 24px;
  background: rgba(255,255,255,0.35);
}
.final-ruling h3 {
  font-family: 'Special Elite', monospace;
  letter-spacing: 0.15em;
  margin-bottom: 14px;
}
.final-ruling .signatures {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 20px;
}
.final-ruling .signature {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  color: var(--ink-faded);
  border-bottom: 1px solid var(--pencil);
  padding: 0 8px 2px;
  transform: rotate(-2deg);
}

/* ------------ buried slip ------------ */
.buried-slip {
  margin: 70px auto 0;
  width: min(420px, 88vw);
  background: var(--paper-aged);
  padding: 26px 24px;
  transform: rotate(1.4deg);
  box-shadow: 2px 3px 10px rgba(0,0,0,0.4);
  opacity: 0.92;
}
.buried-label {
  font-family: 'Special Elite', monospace;
  font-size: 0.62rem; letter-spacing: 0.2em;
  color: var(--ink-faded);
  margin-bottom: 14px;
}
.buried-text {
  font-family: 'Courier Prime', monospace;
  font-size: 1rem; line-height: 1.6;
}
.buried-ruling {
  margin-top: 12px;
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  color: var(--pencil);
  text-align: right;
}

.folder-footer {
  text-align: center;
  margin-top: 50px;
  font-family: 'Special Elite', monospace;
  font-size: 0.62rem; letter-spacing: 0.24em;
  color: rgba(236,224,196,0.4);
}

/* ------------ per-file marks: cheeto contamination ------------ */
.mark-cheeto span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%,
    rgba(228, 118, 24, 0.34) 0%,
    rgba(233, 140, 40, 0.22) 45%,
    rgba(233, 140, 40, 0.0) 75%);
  filter: blur(1px);
  pointer-events: none;
}
/* reserve a contamination zone at the bottom so smudges never collide with text */
.file-paper.has-marks { padding-bottom: 190px; }
/* fingertip cluster, bottom right of the page — someone turned pages while snacking */
.mark-cheeto span:nth-child(1) { width: 34px; height: 46px; right: 66px;  bottom: 118px; transform: rotate(-24deg); }
.mark-cheeto span:nth-child(2) { width: 30px; height: 42px; right: 104px; bottom: 102px; transform: rotate(-10deg); }
.mark-cheeto span:nth-child(3) { width: 28px; height: 38px; right: 140px; bottom: 110px; transform: rotate(6deg); opacity: 0.8; }
/* the thumb drag — a smear, not a tap */
.mark-cheeto span:nth-child(4) {
  width: 120px; height: 26px; right: 46px; bottom: 68px;
  border-radius: 40% 60% 55% 45%;
  transform: rotate(-7deg);
  filter: blur(2px);
  opacity: 0.75;
}
.mark-cheeto .cheeto-note {
  position: absolute;
  right: 40px; bottom: 34px;
  font-family: 'Caveat', cursive;
  font-size: 0.95rem;
  color: var(--pencil);
  transform: rotate(-3deg);
  pointer-events: none;
}

/* ------------ mobile ------------ */
@media (max-width: 620px) {
  .file-columns { flex-direction: column; }
  .file-photo-col { flex: none; width: 200px; margin: 0 auto; }
  .file-paper { padding: 56px 22px 60px; }
}