:root{
    --void:#0f130f;
    --void-2:#181d17;
    --void-3:#20261f;
    --paper:#e8ddc2;
    --paper-2:#d9c9a0;
    --ink:#25201a;
    --ink-soft:#4b4230;
    --moss:#6b8570;
    --moss-dim:#3f5145;
    --rust:#9c5a35;
    --fogcol:159,176,168;
    --grain-opacity:.05;
  }
  *{box-sizing:border-box;}
  html{ scroll-behavior:smooth; font-size:clamp(16px, 0.85vw + 11px, 20px); }
  body{
    margin:0;
    background:var(--void);
    color:var(--paper);
    font-family:'Source Serif 4', serif;
    overflow-x:hidden;
    position:relative;
  }
  ::selection{ background:var(--moss); color:var(--void); }

  /* ---------- grain overlay ---------- */
  .grain{
    position:fixed; inset:0; z-index:500; pointer-events:none;
    opacity:var(--grain-opacity); mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- parallax fog layers ---------- */
  .fog-layer{
    position:fixed; inset:-10% -10%; z-index:0; pointer-events:none;
    background-repeat:no-repeat;
  }
  #fog1{
    background:radial-gradient(ellipse 65% 45% at 20% 30%, rgba(var(--fogcol),.22), transparent 60%),
               radial-gradient(ellipse 55% 35% at 80% 70%, rgba(var(--fogcol),.18), transparent 60%);
  }
  #fog2{
    background:radial-gradient(ellipse 45% 55% at 70% 20%, rgba(var(--fogcol),.16), transparent 55%),
               radial-gradient(ellipse 60% 40% at 30% 80%, rgba(var(--fogcol),.17), transparent 55%);
  }
  #fog3{
    background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,0,0,.55), transparent 60%),
               radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,0,0,.4), transparent 55%);
  }
  .depth{ will-change:transform; }

  /* ---------- progress ledger (sticky index) ---------- */
  .ledger{
    position:fixed; right:18px; top:50%; transform:translateY(-50%);
    z-index:400; display:flex; flex-direction:column; gap:14px;
    font-family:'Special Elite', monospace; font-size:10.5px;
    letter-spacing:.04em;
  }
  .ledger a{
    display:flex; align-items:center; gap:8px; text-decoration:none;
    color:rgba(232,221,194,.45); white-space:nowrap;
    justify-content:flex-end;
  }
  .ledger a .dot{
    width:7px;height:7px;border-radius:50%;
    border:1px solid rgba(232,221,194,.5); flex:none;
    transition:background .3s, box-shadow .3s;
  }
  .ledger a .lbl{
    max-width:0; overflow:hidden; opacity:0; transition:max-width .35s ease, opacity .35s ease;
  }
  .ledger:hover a .lbl{ max-width:160px; opacity:1; margin-right:2px;}
  .ledger a.active{ color:var(--paper); }
  .ledger a.active .dot{ background:var(--moss); box-shadow:0 0 8px var(--moss); border-color:var(--moss);}

  .progress-rail{
    position:fixed; left:0; top:0; height:3px; width:100%; z-index:401;
    background:transparent;
  }
  .progress-rail i{
    display:block; height:100%; width:0%;
    background:linear-gradient(90deg, var(--moss-dim), var(--moss));
  }

  /* ---------- top nav ---------- */
  .topnav{
    position:fixed; top:0; left:0; right:0; z-index:300;
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 26px; font-family:'Special Elite', monospace; font-size:11px;
    letter-spacing:.08em; text-transform:uppercase;
    background:linear-gradient(180deg, rgba(15,19,15,.85), transparent);
    pointer-events:none;
  }
  .topnav span{ opacity:.6; pointer-events:auto; }
  .topnav .ref{ opacity:.35; }

  /* ---------- layout ---------- */
  section{ position:relative; z-index:2; padding:140px 3vw 120px; max-width:clamp(320px, 76vw, 1600px); margin:0 auto; }
  .wide{ max-width:clamp(320px, 88vw, 1840px); }
  @media(max-width:700px){ section{ padding:140px 5vw 120px; max-width:clamp(300px, 94vw, 1600px); } .wide{ max-width:clamp(300px, 94vw, 1840px); } }

  /* ---------- hero ---------- */
  .hero{
    min-height:100vh; display:flex; flex-direction:column; justify-content:center;
    padding-top:0; max-width:clamp(320px, 88vw, 1840px);
  }
  .eyebrow{
    font-family:'Special Elite', monospace; font-size:13px; letter-spacing:.18em;
    text-transform:uppercase; color:#8aab90; margin-bottom:22px;
    opacity:0; animation:fadeUp 1s .2s ease forwards;
  }
  h1.title{
    font-family:'Source Serif 4', serif; font-weight:600; font-style:italic;
    font-size:clamp(2.1rem, 5.4vw, 4.4rem); line-height:1.05; margin:0 0 20px;
    color:var(--paper); opacity:0; animation:fadeUp 1s .4s ease forwards;
    max-width:14ch;
  }
  .byline{
    font-family:'Special Elite', monospace; font-size:14px; letter-spacing:.05em;
    color:rgba(232,221,194,.72); margin-bottom:48px;
    opacity:0; animation:fadeUp 1s .6s ease forwards;
  }
  .quote-block{
    border-left:2px solid var(--moss); padding-left:22px; max-width:560px;
    font-style:italic; color:rgba(232,221,194,.92); font-size:1.18rem; line-height:1.6;
    opacity:0; animation:fadeUp 1s .8s ease forwards;
  }
  .scrollcue{
    margin-top:70px; font-family:'Special Elite', monospace; font-size:10px;
    letter-spacing:.15em; text-transform:uppercase; color:rgba(232,221,194,.4);
    display:flex; align-items:center; gap:10px;
    opacity:0; animation:fadeUp 1s 1.1s ease forwards;
  }
  .scrollcue i{ width:1px; height:34px; background:rgba(232,221,194,.4); display:block; position:relative; overflow:hidden;}
  .scrollcue i::after{
    content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
    background:var(--moss); animation:drip 2.2s ease-in-out infinite;
  }
  @keyframes drip{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }

  /* ---------- reveal-on-scroll ---------- */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,.8,.3,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- typography helpers ---------- */
  .label{ font-family:'Special Elite', monospace; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#8aab90; margin-bottom:14px; display:block;}
  h2{ font-family:'Source Serif 4', serif; font-style:italic; font-weight:600; font-size:clamp(1.5rem,3vw,2.2rem); margin:0 0 26px; color:var(--paper); }
  p{ line-height:1.85; color:rgba(232,221,194,.92); font-size:1.14rem; margin:0 0 20px;}
  .lede{ font-size:1.24rem; color:rgba(232,221,194,.98); }
  .audio-tag{
    display:inline-flex; align-items:center; gap:10px; margin-top:8px;
    font-family:'Special Elite', monospace; font-size:10.5px; letter-spacing:.06em;
    color:rgba(232,221,194,.5); text-transform:uppercase;
  }
  audio{ height:30px; filter:invert(.85) sepia(.15) saturate(1.2); border-radius:20px; }

  /* ---------- pull quote card ---------- */
  .pull{
    background:var(--void-3); border:1px solid rgba(232,221,194,.1);
    padding:34px 38px; margin:36px 0; position:relative;
  }
  .pull::before{
    content:'"'; position:absolute; top:-6px; left:14px; font-family:'Source Serif 4',serif;
    font-size:64px; color:rgba(107,133,112,.35); font-style:italic;
  }
  .pull p{ font-style:italic; color:var(--paper); font-size:1.15rem; margin:0; padding-left:14px;}

  /* ---------- evidence cards (archive photos) ---------- */
  .evidence-row{
    display:grid; grid-template-columns:1fr 1fr; gap:32px; margin:40px 0;
  }
  @media(max-width:780px){ .evidence-row{ grid-template-columns:1fr; } }
  .evidence{
    background:var(--paper); color:var(--ink); padding:14px 14px 18px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
    cursor:pointer; position:relative; transition:transform .4s ease, box-shadow .4s ease;
  }
  .evidence{ --py:0px; }
  .evidence:nth-child(odd){ transform:rotate(-1.4deg) translateY(var(--py,0px)); }
  .evidence:nth-child(even){ transform:rotate(1.1deg) translateY(var(--py,0px)); }
  .evidence:hover{ transform:rotate(0deg) translateY(calc(var(--py,0px) - 6px)); box-shadow:0 40px 70px -18px rgba(0,0,0,.7); }
  .evidence img{ width:100%; display:block; filter:sepia(.35) contrast(1.05) brightness(.95); }
  .evidence .stamp{
    position:absolute; top:10px; right:10px; border:1.5px solid var(--rust); color:var(--rust);
    font-family:'Special Elite', monospace; font-size:9px; letter-spacing:.06em;
    padding:3px 7px; transform:rotate(6deg); text-transform:uppercase; background:rgba(232,221,194,.85);
  }
  .evidence .cap{ font-family:'Special Elite', monospace; font-size:10.5px; margin-top:10px; letter-spacing:.02em; line-height:1.5; color:var(--ink-soft);}
  .evidence .ref{ font-size:9px; opacity:.55; margin-top:4px; display:block;}

  /* ---------- lightbox ---------- */
  .lightbox{
    position:fixed; inset:0; background:rgba(10,12,10,.92); z-index:900;
    display:none; align-items:center; justify-content:center; padding:5vh 5vw;
    backdrop-filter:blur(4px);
  }
  .lightbox.open{ display:flex; }
  .lb-card{
    background:var(--paper); color:var(--ink); max-width:640px; width:100%;
    max-height:88vh; overflow:auto; padding:26px 30px 34px; position:relative;
    box-shadow:0 50px 100px rgba(0,0,0,.6);
  }
  .lb-card img{ width:100%; filter:sepia(.35) contrast(1.05) brightness(.95); margin-bottom:16px;}
  .lb-close{
    position:absolute; top:14px; right:16px; background:none; border:none; font-family:'Special Elite',monospace;
    font-size:13px; cursor:pointer; color:var(--ink); letter-spacing:.05em;
  }
  .lb-card h3{ font-family:'Special Elite', monospace; font-size:14px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 6px;}
  .lb-card .ref{ font-size:11px; opacity:.6; margin-bottom:16px; display:block; font-family:'Special Elite', monospace;}
  .lb-card p{ color:var(--ink-soft); font-size:.95rem; line-height:1.7; }

  /* ---------- footnotes ---------- */
  .report{ background:var(--void-3); border:1px solid rgba(232,221,194,.1); padding:36px 40px; margin:30px 0;}
  .fnum{
    color:var(--moss); cursor:pointer; font-weight:700; border-bottom:1px dotted var(--moss);
    padding:0 2px; font-size:.85em;
  }
  .fnote{
    display:none; font-family:'Caveat', cursive; font-size:1.15rem; color:var(--paper-2);
    background:rgba(0,0,0,.25); border-left:2px solid var(--rust); padding:10px 16px; margin:10px 0 18px;
    line-height:1.4;
  }
  .fnote.open{ display:block; }

  /* ---------- glossary words in running text ---------- */
  .glossword{
    color:var(--paper); border-bottom:1px dotted var(--moss); cursor:pointer;
    transition:color .2s ease, background .2s ease; padding:0 1px;
  }
  .glossword:hover{ color:var(--moss); background:rgba(107,133,112,.12); }

  /* ---------- field notes filter ---------- */
  .tagbar{ display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 34px; }
  .tag{
    font-family:'Special Elite', monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
    border:1px solid rgba(232,221,194,.3); color:rgba(232,221,194,.7); padding:8px 14px;
    cursor:pointer; background:none; transition:all .25s ease;
  }
  .tag.active, .tag:hover{ border-color:var(--moss); color:var(--paper); background:rgba(107,133,112,.15); }
  .note-grid{ display:grid; gap:20px; }
  .note{
    background:var(--void-3); border:1px solid rgba(232,221,194,.1); padding:24px 26px;
    display:grid; grid-template-columns:110px 1fr; gap:22px; transition:opacity .4s ease, transform .4s ease;
  }
  @media(max-width:640px){ .note{ grid-template-columns:1fr; } }
  .note .date{ font-family:'Special Elite', monospace; font-size:12.5px; color:#8aab90; letter-spacing:.04em;}
  .note .marginal{ font-family:'Caveat', cursive; font-size:1.1rem; color:var(--paper-2); margin-top:10px; line-height:1.3;}
  .note.hide{ display:none; }

  /* ---------- comparison slider ---------- */
  .compare{
    position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; margin:36px 0;
    border:1px solid rgba(232,221,194,.15);
  }
  .compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none;}
  .compare .after{ clip-path:inset(0 0 0 50%); filter:sepia(.4) contrast(1.05); }
  .compare .before{ filter:sepia(.15) blur(6px) brightness(.8) saturate(.7); }
  .compare .handle{
    position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--moss);
    cursor:ew-resize; transform:translateX(-1px);
  }
  .compare .handle::after{
    content:'◂▸'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:var(--moss); color:var(--void); width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:11px; letter-spacing:2px;
  }
  .compare-labels{ display:flex; justify-content:space-between; font-family:'Special Elite', monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:rgba(232,221,194,.5); margin-top:10px;}

  /* ---------- random pull ---------- */
  .pull-zone{ text-align:center; padding:100px 8vw 140px; position:relative; }
  .pull-btn{
    font-family:'Special Elite', monospace; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
    background:var(--rust); color:var(--paper); border:none; padding:18px 34px; cursor:pointer;
    box-shadow:0 20px 40px -12px rgba(156,90,53,.5); transition:transform .25s ease;
  }
  .pull-btn:hover{ transform:translateY(-3px); }
  .pull-btn:active{ transform:scale(.97); }
  .fragment-stage{ position:relative; height:280px; margin-top:50px; }
  .fragment{
    position:absolute; left:50%; top:0; width:min(420px,80vw); background:var(--paper); color:var(--ink);
    padding:22px 24px; box-shadow:0 30px 60px -18px rgba(0,0,0,.6); text-align:left;
    opacity:0; pointer-events:none; transition:opacity .5s ease, transform .5s ease, box-shadow .3s ease;
  }
  .fragment.show{ opacity:1; pointer-events:auto; }
  .fragment.clickable{ cursor:pointer; }
  .fragment.clickable:hover{ box-shadow:0 40px 80px -16px rgba(0,0,0,.75); }
  .fragment .k{ font-family:'Special Elite', monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--rust); display:block; margin-bottom:8px;}
  .fragment .txt{ font-family:'Caveat', cursive; font-size:1.25rem; line-height:1.35; color:var(--ink-soft);}
  .fragment .txt.serif{ font-family:'Source Serif 4', serif; font-style:italic; font-size:1rem; line-height:1.6;}
  .fragment .more{
    display:block; margin-top:14px; font-family:'Special Elite', monospace; font-size:10.5px;
    text-transform:uppercase; letter-spacing:.06em; color:var(--moss-dim);
  }
  .fragment.clickable:hover .more{ color:var(--rust); }

  /* ---------- tilt / touch feedback ---------- */
  .tiltable{ transition:transform .15s ease-out, box-shadow .3s ease; transform-style:preserve-3d; }
  .tiltable:hover{ box-shadow:0 40px 70px -18px rgba(0,0,0,.75); }
  @keyframes wobble{
    0%{ transform:rotate(var(--r,0deg)) scale(1); }
    25%{ transform:rotate(calc(var(--r,0deg) - 4deg)) scale(1.02); }
    50%{ transform:rotate(calc(var(--r,0deg) + 3deg)) scale(1.03); }
    75%{ transform:rotate(calc(var(--r,0deg) - 2deg)) scale(1.02); }
    100%{ transform:rotate(var(--r,0deg)) scale(1); }
  }
  .wobbling{ animation:wobble .5s ease; }
  .hint{
    font-family:'Special Elite', monospace; font-size:9px; text-transform:uppercase; letter-spacing:.08em;
    color:rgba(232,221,194,.4); text-align:center; margin-top:6px;
  }

  /* ---------- archive board (drag & drop) ---------- */
  .board-wrap{ position:relative; }
  .board{
    position:relative; height:640px; margin:36px 0 10px;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(232,221,194,.035) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(232,221,194,.035) 40px),
      var(--void-3);
    border:1px solid rgba(232,221,194,.12);
    overflow:hidden;
    touch-action:none;
  }
  @media(max-width:640px){ .board{ height:900px; } }
  .board-item{
    position:absolute; cursor:grab; user-select:none; touch-action:none;
  }
  .board-item:active{ cursor:grabbing; z-index:50 !important; }
  .polaroid{
    width:170px; background:var(--paper); padding:10px 10px 34px; box-shadow:0 20px 40px -12px rgba(0,0,0,.6);
  }
  .polaroid img{ width:100%; display:block; filter:sepia(.35) contrast(1.05) brightness(.95); }
  .polaroid .pcap{ position:absolute; bottom:10px; left:10px; right:10px; font-family:'Caveat',cursive; font-size:1rem; color:var(--ink-soft); text-align:center;}

  .doc-scrap{
    width:190px; background:var(--paper-2); padding:16px; box-shadow:0 20px 40px -12px rgba(0,0,0,.6);
    font-family:'Special Elite', monospace; font-size:9.5px; line-height:1.7; color:var(--ink);
    clip-path:polygon(0 0,100% 2%,98% 100%,2% 96%);
  }
  .doc-scrap .redact{ display:inline-block; background:var(--ink); color:var(--ink); border-radius:2px; }

  .media-ph{
    width:220px; background:#0b0d0a; border:2px solid rgba(232,221,194,.25); box-shadow:0 20px 40px -12px rgba(0,0,0,.7);
  }
  .media-ph .screen{
    aspect-ratio:4/3; position:relative; display:flex; align-items:center; justify-content:center;
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
      radial-gradient(ellipse at center, #1d2420 0%, #0b0d0a 80%);
    color:rgba(232,221,194,.6); font-family:'Special Elite', monospace; font-size:10px; text-align:center;
    overflow:hidden;
  }
  .media-ph .screen .play{
    width:44px; height:44px; border-radius:50%; border:1.5px solid var(--moss); display:flex; align-items:center; justify-content:center;
    color:var(--moss); font-size:14px; margin-bottom:8px; transition:transform .2s ease;
  }
  .media-ph:hover .screen .play{ transform:scale(1.1); }
  .media-ph .barlabel{ padding:8px 10px; font-family:'Special Elite', monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:rgba(232,221,194,.45); display:flex; justify-content:space-between;}
  .media-ph video, .media-ph audio{ display:block; }
  .media-ph video:focus-visible, .media-ph audio:focus-visible{ outline:2px solid var(--moss); }
  .media-ph.large{ width:100%; max-width:760px; margin:20px 0; }
  .media-ph.large video{ width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; }
  @media(max-width:600px){ .media-ph.large video{ aspect-ratio:4/3; } }
  .media-ph.playing .screen::after{
    content:'▶ PLACEHOLDER PLAYBACK — replace with your footage/audio';
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:14px;
    background:rgba(107,133,112,.15); color:var(--paper); animation:scan 2s linear infinite;
  }
  @keyframes scan{ 0%{ filter:brightness(1);} 50%{ filter:brightness(1.3);} 100%{ filter:brightness(1);} }
  .reel{
    width:26px;height:26px;border-radius:50%;border:3px solid var(--moss); position:relative;
  }
  .media-ph.playing .reel{ animation:spin 1.4s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .board-hint{
    position:absolute; top:14px; left:14px; font-family:'Special Elite', monospace; font-size:9.5px;
    text-transform:uppercase; letter-spacing:.08em; color:rgba(232,221,194,.35); pointer-events:none;
  }

  /* ---------- case file overlay (double-click "new page") ---------- */
  .casefile{
    position:fixed; inset:0; z-index:950; background:var(--paper); color:var(--ink);
    transform:translateX(100%); transition:transform .55s cubic-bezier(.16,.8,.3,1);
    overflow-y:auto;
  }
  .casefile.open{ transform:translateX(0); }
  .cf-inner{ max-width:760px; margin:0 auto; padding:70px 6vw 100px; }
  .cf-close{
    position:fixed; top:20px; right:24px; z-index:960; background:var(--ink); color:var(--paper);
    border:none; font-family:'Special Elite', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    padding:10px 16px; cursor:pointer;
  }
  .cf-inner .stampbig{
    display:inline-block; border:2px solid var(--rust); color:var(--rust); font-family:'Special Elite', monospace;
    font-size:11px; text-transform:uppercase; padding:5px 12px; transform:rotate(-4deg); margin-bottom:20px;
  }
  .cf-inner img{ width:100%; margin:20px 0; filter:sepia(.35) contrast(1.05) brightness(.95); }
  .cf-inner h2{ color:var(--ink); font-style:italic; }
  .cf-inner p{ color:var(--ink-soft); }
  .cf-inner .ref{ font-family:'Special Elite', monospace; font-size:11px; opacity:.55; display:block; margin-bottom:24px; }

  footer{
    text-align:center; padding:60px 6vw 90px; font-family:'Special Elite', monospace; font-size:10.5px;
    letter-spacing:.06em; color:rgba(232,221,194,.4); position:relative; z-index:2;
  }
  footer a{ color:var(--moss); }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  }
  a:focus-visible, button:focus-visible, .tag:focus-visible{ outline:2px solid var(--moss); outline-offset:3px; }