/* ───────── MISSION IMPOSSIBLE · design system: a detective's desk ───────── */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Stardos+Stencil:wght@400;700&family=Bebas+Neue&family=Caveat:wght@500;700&display=swap');

:root {
  --ink: #17120d;
  --ink-soft: #3a2f22;
  --desk: #231b14;
  --desk-2: #2e241a;
  --kraft: #c8a272;
  --kraft-dark: #a9824f;
  --manila: #e4cf9f;
  --paper: #efe5cc;
  --paper-2: #f6efdc;
  --stamp: #b3261e;
  --stamp-dark: #8d1c16;
  --hi: #f4e04d;
  --ok: #2f6b3a;
  --tape: #e8c53a;
  --f-type: 'Special Elite', 'Courier Prime', 'Courier New', monospace;
  --f-mono: 'Courier Prime', 'Courier New', monospace;
  --f-stencil: 'Stardos Stencil', 'Bebas Neue', Impact, sans-serif;
  --f-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --f-hand: 'Caveat', 'Segoe Script', cursive;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* paper surface: noise lit from one side, so it has real bumps instead of flat speckles */
  --paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='p' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='5' seed='3' result='n' stitchTiles='stitch'/><feDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='1.7' diffuseConstant='1.08'><feDistantLight azimuth='235' elevation='60'/></feDiffuseLighting></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  --paper-tooth: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='t' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9' result='n' stitchTiles='stitch'/><feDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='.9' diffuseConstant='1.1'><feDistantLight azimuth='45' elevation='70'/></feDiffuseLighting></filter><rect width='100%' height='100%' filter='url(%23t)'/></svg>");
  --fibers: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .30  0 0 0 0 .14  0 0 0 .5 -.12'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --blotch: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='12' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .38  0 0 0 0 .15  0 0 0 1.3 -.5'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
  /* dark oak: long vertical grain, knots of colour, mottling */
  --wood: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='w' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.013 .0024' numOctaves='5' seed='21' result='g' stitchTiles='stitch'/><feColorMatrix in='g' type='matrix' values='0 0 0 0 .36  0 0 0 0 .23  0 0 0 0 .12  1.5 0 0 0 -.62' result='light'/><feTurbulence type='fractalNoise' baseFrequency='.22 .0035' numOctaves='3' seed='5' result='h' stitchTiles='stitch'/><feColorMatrix in='h' type='matrix' values='0 0 0 0 .02  0 0 0 0 .01  0 0 0 0 0  0 0 0 1.5 -.62' result='streak'/><feMerge><feMergeNode in='light'/><feMergeNode in='streak'/></feMerge></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--paper); background: var(--desk); font-family: var(--f-mono); font-size: 17px; line-height: 1.55; overflow-x: hidden; }
img, svg, canvas { max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--hi); color: var(--ink); }
:focus-visible { outline: 3px solid var(--hi); outline-offset: 3px; }

/* the desk: dark wood, a pool of light, grain and a vignette */
.desk {
  background-color: #1c140d;
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 214, 150, .16), transparent 62%),
    radial-gradient(90% 70% at 50% 112%, rgba(0, 0, 0, .6), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 238px, rgba(0, 0, 0, .55) 238px 240px, rgba(255, 220, 160, .07) 240px 242px),
    var(--wood);
  background-size: auto, auto, auto, 700px 700px;
  background-attachment: scroll, scroll, scroll, scroll;
}
.desk::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: var(--noise); opacity: .16; mix-blend-mode: overlay; z-index: 60; }

/* paper: grain, fibres, a fold, a soft shadow */
.paper {
  position: relative; color: var(--ink); background-color: var(--paper);
  background-image: var(--blotch), var(--paper-grain), var(--paper-tooth), var(--fibers), linear-gradient(180deg, rgba(255,255,255,.4), transparent 28%, rgba(120, 90, 40, .12));
  background-blend-mode: soft-light, multiply, multiply, multiply, normal;
  background-size: 600px 600px, 420px 420px, 260px 260px, 320px 320px, auto;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, inset 0 0 70px rgba(140, 96, 38, .30), inset 0 0 5px rgba(80, 55, 20, .45), 0 20px 32px -12px rgba(0,0,0,.7), 0 3px 6px rgba(0,0,0,.4);
}
/* age: a coffee ring, a smudge and a rubbed corner */
.paper::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0;
  background:
    radial-gradient(circle at var(--ring-x, 84%) var(--ring-y, 18%), rgba(104, 62, 20, .06) 0 33px, rgba(104, 62, 20, .34) 35px, rgba(104, 62, 20, .17) 40px, rgba(104, 62, 20, .05) 46px, transparent 50px),
    radial-gradient(ellipse 26% 14% at 12% 90%, rgba(120, 84, 34, .20), transparent 70%),
    radial-gradient(ellipse 20% 30% at 98% 55%, rgba(110, 75, 30, .14), transparent 70%),
    linear-gradient(135deg, rgba(255, 245, 215, .0) 80%, rgba(255, 245, 215, .18)); mix-blend-mode: multiply; }
.paper > * { position: relative; z-index: 1; }
.paper > .tape, .paper > .clip, .paper > .stamp, .paper > .pin { position: absolute; }
.paper.kraft { background-color: var(--kraft); }
.paper.manila { background-color: var(--manila); }
/* folds: a vertical and a horizontal crease, light on one side, shadow on the other */
.paper.fold::before, .creased::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, transparent 49.2%, rgba(60, 40, 15, .16) 49.7%, rgba(255, 255, 255, .45) 50.3%, transparent 50.9%),
    linear-gradient(90deg, transparent 33%, rgba(60, 40, 15, .12) 33.3%, rgba(255, 255, 255, .32) 33.7%, transparent 34.1%); }
/* a torn edge is cut with a random polygon (set by JS); the shadow comes from the wrapper because clip-path would cut it off */
.torn { box-shadow: inset 0 0 70px rgba(140, 96, 38, .30); }
.torn-wrap { filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.45)); }

.type { font-family: var(--f-type); }
.hand { font-family: var(--f-hand); }
.stencil { font-family: var(--f-stencil); letter-spacing: .06em; text-transform: uppercase; }
.display { font-family: var(--f-display); letter-spacing: .03em; line-height: .92; }
.dim { opacity: .7; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* stamps: a rubber stamp is a bordered, slightly ragged, slightly crooked block of ink */
.stamp {
  --c: var(--stamp);
  display: inline-block; padding: .18em .55em .12em; border: .16em solid var(--c); border-radius: .22em; color: var(--c);
  font-family: var(--f-stencil); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.1; transform: rotate(var(--r, -6deg));
  mix-blend-mode: multiply; opacity: .9; user-select: none; filter: url(#ink);
  box-shadow: inset 0 0 0 .05em var(--c);
  filter: contrast(1.1);
}
.stamp.green { --c: var(--ok); }
.stamp.blue { --c: #23407a; }
.stamp.big { font-size: clamp(2rem, 6vw, 4rem); }
.stamp.thud { animation: thud .55s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes thud { 0% { transform: rotate(var(--r, -6deg)) scale(2.6); opacity: 0; } 55% { opacity: 1; } 75% { transform: rotate(var(--r, -6deg)) scale(.94); } 100% { transform: rotate(var(--r, -6deg)) scale(1); opacity: .88; } }

/* redaction: a black bar that slides away when the file is declassified */
.redact { color: transparent; background: linear-gradient(#0b0907, #0b0907) no-repeat left center / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .12em; margin: 0 -.12em;
  transition: background-size .9s cubic-bezier(.7, 0, .2, 1), color .2s linear .55s; }
.redact.open { background-size: 0% 100%; background-position: right center; color: var(--ink); }
.no-js .redact, .reduced .redact { color: var(--ink); background-size: 0% 100%; }
.hl { background: linear-gradient(100deg, transparent 0 3%, var(--hi) 3% 97%, transparent 97%) no-repeat 0 85% / 0 .6em; transition: background-size .8s ease .2s; padding: 0 .1em; }
.hl.open { background-size: 100% .6em; }

/* masking tape and paper clips */
.tape { position: absolute; width: 5.5em; height: 1.8em; background: linear-gradient(180deg, rgba(240, 210, 90, .78), rgba(222, 186, 52, .70)); box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.14); transform: rotate(var(--r, -4deg)); backdrop-filter: blur(.4px);
  clip-path: polygon(0 0, 3% 12%, 0 26%, 2% 40%, 0 55%, 3% 70%, 0 84%, 2% 100%, 98% 100%, 100% 86%, 97% 70%, 100% 54%, 98% 38%, 100% 22%, 97% 8%, 100% 0); }
.tape::before { content: ''; position: absolute; inset: 0; background: var(--noise); opacity: .5; mix-blend-mode: multiply; }
.clip { position: absolute; width: 22px; height: 64px; border: 3px solid #8e9096; border-radius: 12px; background: transparent; transform: rotate(var(--r, 8deg)); filter: drop-shadow(1px 2px 1px rgba(0,0,0,.4)); }
.clip { border-color: #b9bcc4; box-shadow: 1px 2px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.25); }
.clip::before { content: ''; position: absolute; left: 3px; top: 8px; right: -3px; bottom: -6px; border: 3px solid #8e9096; border-radius: 10px; }

/* buttons that look like rubber stamps and manila tabs */
.btn {
  --bg: var(--stamp); --fg: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: .8em 1.6em; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--bg); color: var(--fg); font-family: var(--f-stencil); font-weight: 700; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 5px 0 var(--stamp-dark), 0 12px 18px -6px rgba(0,0,0,.6); transition: transform .12s, box-shadow .12s, filter .2s;
  position: relative; overflow: hidden;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 7px 0 var(--stamp-dark), 0 16px 22px -6px rgba(0,0,0,.6); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--stamp-dark), 0 4px 8px -4px rgba(0,0,0,.6); }
.btn[disabled] { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }
.btn.ghost { --bg: transparent; --fg: var(--paper); box-shadow: none; border: 2px solid currentColor; }
.btn.ghost:hover { background: rgba(255,255,255,.08); box-shadow: none; }
.btn.ink { --bg: var(--ink); --fg: var(--paper); box-shadow: 0 5px 0 #000, 0 12px 18px -6px rgba(0,0,0,.6); }
.btn.small { min-height: 40px; padding: .5em 1.1em; font-size: .9rem; }

/* motion: respect people who switch it off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
}