/* ═══ THE CASE DOSSIER — base: tokens, ground, type, textures ═══
   One rule governs everything: ink is for words, paper is for surfaces,
   red is for verdicts, gold is only ever light. */

:root{
  /* the room */
  --desk:#141210;            /* the dark desk at night */
  --desk-deep:#0C0A08;       /* the far corners */
  --muted:#A39C8F;           /* graphite on the dark ground (6.6:1) */
  --line:rgba(232,185,106,.13);
  --line-soft:rgba(232,185,106,.08);

  /* the paper */
  --manila:#D9C7A0;
  --manila-2:#CDB88D;
  --manila-edge:#B8A67E;
  --manila-shade:#8F7C58;
  --bone:#EDE6D6;
  --bone-2:#E3D9C4;
  --ink:#1C1A17;             /* typewriter ink on paper (13:1 on manila) */
  --ink-soft:#3A362F;
  --graphite:#6B675E;        /* pencil annotations — paper only */

  /* the verdict */
  --stamp:#B3402E;           /* the rubber stamp — decor, ≥large text */
  --stamp-ink:#9C2F20;       /* stamp ink as text on paper (5.9:1) */
  --stamp-btn:#A93524;       /* button ground (4.9:1 with bone text) */
  --stamp-press:#7E2317;

  /* the light — reserved exclusively for glow */
  --lamp:#E8B96A;
  --lamp-cool:#E9E4D4;

  /* type — system stacks, no webfonts, like every good office */
  --mono:"Courier New",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--desk);
  color:var(--bone);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── the room's atmosphere: vignette + paper grain, fixed, above ground below ink ── */
.room{position:fixed;inset:0;z-index:0;pointer-events:none}
.room::before{ /* corner falloff — the unlit parts of the desk */
  content:"";position:absolute;inset:0;
  background:radial-gradient(140% 110% at 50% 12%,transparent 42%,rgba(6,5,3,.55) 88%,rgba(4,3,2,.78) 100%);
}
.room::after{ /* dust in the air */
  content:"";position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ── THE LAMP — the only gold on any page. Warm pool, slightly off-centre:
      lamps are never perfectly placed. Each journey stage moves the lamp. ── */
.lamp{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity .8s ease}
.lamp::before{
  content:"";position:absolute;inset:-8%;
  background:
    radial-gradient(46% 38% at 38% 18%,rgba(232,185,106,.16),transparent 70%),
    radial-gradient(30% 26% at 38% 18%,rgba(240,200,124,.10),transparent 72%),
    radial-gradient(60% 44% at 72% 84%,rgba(232,185,106,.05),transparent 70%);
}
.lamp--evidence::before{
  background:
    radial-gradient(46% 38% at 62% 16%,rgba(233,228,212,.14),transparent 70%),
    radial-gradient(30% 26% at 62% 16%,rgba(240,238,228,.09),transparent 72%),
    radial-gradient(60% 44% at 30% 86%,rgba(232,185,106,.045),transparent 70%);
}
.lamp--document::before{
  background:
    radial-gradient(52% 44% at 50% 22%,rgba(240,200,124,.20),transparent 70%),
    radial-gradient(34% 30% at 50% 22%,rgba(246,214,146,.12),transparent 72%),
    radial-gradient(60% 44% at 78% 88%,rgba(232,185,106,.05),transparent 70%);
}
.lamp--hearing::before{
  background:
    radial-gradient(44% 36% at 46% 20%,rgba(216,150,96,.15),transparent 70%),
    radial-gradient(28% 24% at 46% 20%,rgba(226,164,110,.09),transparent 72%),
    radial-gradient(56% 42% at 70% 88%,rgba(179,64,46,.06),transparent 72%);
}
@media (prefers-reduced-motion:no-preference){
  .lamp{animation:lampbreathe 9s ease-in-out infinite}
}
@keyframes lampbreathe{0%,100%{opacity:1}50%{opacity:.86}}

/* ── type ── */
h1,h2,h3{font-family:var(--serif);font-weight:700;color:var(--bone);line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5.4vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.18rem}
p{max-width:62ch}
a{color:inherit}
:focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:2px}

.kick{ /* the mono eyebrow, like a file reference stamped at the top of a page */
  font:700 .72rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);
}
.kick b{color:var(--lamp);font-weight:700}
.lede{color:var(--muted);font-size:1.06rem}
.wrap{width:min(1180px,100% - 3rem);margin-inline:auto;position:relative;z-index:2}
main{position:relative;z-index:2}

/* ── paper grain, laid over any surface that claims to be paper ── */
.paper-grain{position:relative}
.paper-grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* ── reveal on scroll — paper arriving on the desk ── */
.rv{opacity:0;transform:translateY(14px)}
.rv.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv-d1.is-in{transition-delay:.12s}
.rv-d2.is-in{transition-delay:.24s}
.rv-d3.is-in{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}