*{box-sizing:border-box}
:root{
  --ink:#27231d;
  --red:#8e261f;
  --paper:#ded6bf;
  --kraft:#8d7b5d;
  --deep:#1a120e;
}
html,body{margin:0;width:100%;height:100%;background:#17100c;overflow:hidden}
body{font-family:"Courier New",Courier,monospace;color:var(--ink)}
button,a{font:inherit}
button{color:inherit}
[hidden]{display:none!important}

.workspace{
  width:100%;
  height:100vh;
  position:relative;
  padding:88px 34px 28px;
  background:
    radial-gradient(circle at 50% 22%,rgba(255,210,150,.08),transparent 38%),
    #392419 url("assets/leather_texture.jpg") center/cover;
  box-shadow:inset 0 0 120px #000d;
}
.desk-stitch{
  position:fixed;inset:15px;border:2px solid #7f5c3e;border-radius:30px;
  box-shadow:0 0 0 4px #22150f,0 0 0 7px #5d3f2c;pointer-events:none
}
.desk-stitch:after{
  content:"";position:absolute;inset:8px;border:1px dashed #b18055;border-radius:21px
}

.bureau-mark{
  position:fixed;left:34px;top:25px;z-index:50;
  display:flex;align-items:center;gap:12px;
  background:rgba(71,49,34,.88);
  color:#d9c8a9;
  padding:7px 13px;
  border:1px solid #a47b4d;
  box-shadow:0 4px 10px #0008;
}
.bureau-mark img{width:36px;height:36px;filter:invert(82%) sepia(12%) saturate(583%) hue-rotate(351deg) brightness(91%)}
.bureau-mark b,.bureau-mark span{display:block}
.bureau-mark b{font-family:Georgia,serif;font-size:.85rem;letter-spacing:.07em}
.bureau-mark span{font-size:.52rem;letter-spacing:.12em;margin-top:3px}

.archive-folder{
  width:min(1240px,calc(100vw - 90px));
  height:min(700px,calc(100vh - 125px));
  min-height:0;
  margin:0 auto;
  position:relative;
}
.archive-folder:before{
  content:"";position:absolute;inset:0;
  background:#8e7b5c url("assets/kraft_texture.jpg") center/cover;
  border-radius:8px 22px 22px 8px;
  box-shadow:0 28px 65px #000c,inset 0 0 38px #5b493477;
}
.folder-tab{
  position:absolute;top:-25px;left:7%;z-index:4;
  min-width:132px;text-align:center;
  padding:10px 24px;
  background:#a6926a url("assets/kraft_texture.jpg") center/cover;
  border-radius:5px 5px 0 0;
  box-shadow:0 -3px 8px #0005;
  font-weight:bold;letter-spacing:.14em;
}
.folder-flap{
  position:absolute;right:4%;top:4%;width:27%;height:18%;
  background:#9a8663 url("assets/kraft_texture.jpg") center/cover;
  clip-path:polygon(0 0,100% 0,82% 100%,0 100%);
  opacity:.75;
}

.archive-closed{display:grid;place-items:center;padding:34px}
.cover-document{
  position:relative;z-index:2;
  width:min(690px,84%);
  height:min(610px,calc(100% - 34px));
  min-height:0;
  text-align:center;
  padding:48px 42px;
  background:#ded6bf url("assets/archival_paper.jpg") center/cover;
  border:1px solid #8e8571;
  box-shadow:0 18px 34px #0007;
}
.cover-document:before,.index-paper:before,.summary-document:before{
  content:"";position:absolute;inset:11px;border:1px solid #a89f89;pointer-events:none
}
.eyebrow{font-size:.72rem;letter-spacing:.17em;font-weight:bold}.red{color:var(--red)}
h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.7rem,5.4vw,4.9rem);line-height:.86;letter-spacing:-.055em;
  margin:35px 0 24px
}
.archive-number{font-size:clamp(1.05rem,2.2vw,1.65rem);font-weight:bold;letter-spacing:.09em}
.classification,.microcopy{font-size:.67rem;letter-spacing:.1em}
.declassified-stamp{
  width:max-content;margin:35px auto;
  border:4px double var(--red);color:var(--red);
  padding:10px 22px;font-size:clamp(1.5rem,3vw,2.5rem);font-weight:bold;
  transform:rotate(-6deg)
}
.primary-action{
  border:0;background:#241f19;color:#eee4d0;
  padding:15px 27px;font-weight:bold;letter-spacing:.08em;
  cursor:pointer;box-shadow:0 5px 0 #0e0b09
}
.primary-action:active{transform:translateY(4px);box-shadow:0 1px 0 #0e0b09}

.archive-open{
  display:grid;
  grid-template-columns:31% 1fr;
  gap:0;
  padding:18px;
  animation:openFolder .45s ease both;
}
@keyframes openFolder{from{opacity:0;transform:scale(.985) translateY(8px)}to{opacity:1;transform:none}}
.folder-back{position:absolute;inset:18px;background:#8e7b5c url("assets/kraft_texture.jpg") center/cover;border-radius:5px 18px 18px 5px}
.folder-pocket{
  position:absolute;right:2.5%;bottom:2.3%;width:60%;height:24%;
  background:rgba(101,83,58,.35);
  clip-path:polygon(0 24%,100% 0,100% 100%,0 100%);
  border-bottom-right-radius:14px;pointer-events:none
}
.open-tab{left:4.5%}

.archive-index,.archive-content{position:relative;z-index:2}
.archive-index{padding:14px}
.index-paper{
  height:100%;min-height:0;position:relative;
  background:#ded6bf url("assets/archival_paper.jpg") center/cover;
  padding:40px 28px 24px;
  box-shadow:5px 10px 20px #0006;
}
.index-seal{position:absolute;right:28px;top:25px;width:76px;opacity:.18}
h2{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(1.8rem,3vw,3rem);line-height:.88;letter-spacing:-.05em;
  margin:12px 0 22px
}
.metadata{margin:0}
.metadata div{border-bottom:1px solid #a39a84;padding:6px 0}
.metadata dt{font-size:.57rem}.metadata dd{margin:3px 0 0;font-size:.82rem}
.archive-nav{display:grid;gap:9px;margin-top:18px}
.archive-nav button{
  border:1px solid #4b463d;background:#e3dbc5aa;
  padding:10px 12px;text-align:left;cursor:pointer
}
.archive-nav b{display:inline-block;width:40px}
.archive-nav button:hover,.archive-nav button.active{background:#262019;color:#eee4ce}
.close-archive{margin-top:21px;border:0;background:none;text-decoration:underline;font-weight:bold;cursor:pointer;padding:0}

.archive-content{
  min-height:0;
  padding:28px 30px 30px 44px;
  border-left:22px solid rgba(80,64,44,.42);
  box-shadow:inset 10px 0 14px #4a3a2855;
}
.panel{display:none;height:100%}
.active-panel{display:flex;align-items:center;justify-content:center;gap:34px;animation:paperIn .25s ease both}
@keyframes paperIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.summary-document{
  position:relative;width:45%;height:min(570px,88%);
  min-height:0;
  padding:36px 31px;
  background:#ded6bf url("assets/archival_paper.jpg") center/cover;
  box-shadow:8px 13px 22px #0007;
  transform:rotate(-1.2deg)
}
.summary-document h3,.file-release h3,.related-file h3{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(1.5rem,2.15vw,2.65rem);line-height:.92;letter-spacing:-.04em;
  margin:18px 0 28px;
  overflow-wrap:normal;word-break:normal
}
.summary-document p{font-size:clamp(.74rem,1vw,.94rem);line-height:1.35}
.summary-document strong{display:block;font-size:.9rem;line-height:1.3}
.paperclip{
  position:absolute;right:35px;top:-18px;width:18px;height:63px;
  border:3px solid #5d5b56;border-radius:12px;transform:rotate(8deg)
}
.official-stamp{
  position:absolute;right:25px;bottom:20px;
  display:grid;place-items:center;text-align:center;
  width:132px;height:132px;transform:rotate(-10deg);opacity:.7
}
.official-stamp img{position:absolute;width:100%;height:100%}
.official-stamp span{font-weight:bold;color:var(--red);font-size:.72rem;line-height:1.05;background:#ded6bfe0;padding:3px}

.evidence-photo{
  position:relative;width:48%;
  border:0;background:#e7dfca;
  padding:14px 14px 27px;
  box-shadow:10px 16px 26px #0008;
  transform:rotate(1.8deg);cursor:pointer
}
.evidence-photo img{display:block;width:100%;filter:grayscale(1) contrast(1.05)}
.evidence-photo small{display:block;text-align:left;margin-top:11px;font-size:.62rem;letter-spacing:.07em}
.tape{position:absolute;top:-13px;width:78px;height:28px;background:#cbb883c7;z-index:3}
.tape-a{left:9%;transform:rotate(-5deg)}.tape-b{right:7%;transform:rotate(6deg)}

.photo-view{width:min(1120px,97%)}
.object-toolbar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  background:#2a241e;color:#e8dfcc;padding:13px 15px;
  box-shadow:8px 12px 20px #0007
}
.object-toolbar button,.object-toolbar a{
  border:1px solid #b5a98e;background:transparent;color:#eee4d0;
  padding:9px 12px;text-decoration:none;cursor:pointer;font-weight:bold
}
.object-toolbar span{text-align:center;font-size:.76rem;letter-spacing:.08em}
.photo-mat{
  padding:22px;background:#e6dfca;
  box-shadow:10px 16px 28px #0008
}
.photo-mat img{display:block;width:100%;max-height:68vh;object-fit:contain;filter:grayscale(1) contrast(1.05)}

.report-stack{
  width:min(790px,96%);
  height:100%;
  max-height:620px;
  position:relative;
  padding-top:60px;
}
.report-controls{
  position:absolute;left:0;right:0;top:0;z-index:20;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  background:#ded6bf url("assets/archival_paper.jpg") center/cover;
  border:1px solid #908672;padding:12px 15px;
  box-shadow:8px 12px 20px #0006
}
.report-controls button{border:1px solid #5b5448;background:#ece5d2;padding:8px 11px;cursor:pointer}
.report-controls span{text-align:center;font-weight:bold;font-size:.76rem}
.page-stage{
  position:relative;
  z-index:1;
  height:calc(100% - 4px);
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px 8px;
  overflow:visible;
}
.page-underlay{
  position:absolute;
  left:50%;
  top:50%;
  z-index:1;
  width:auto;
  height:min(92%,540px);
  aspect-ratio:210/297;
  background:#d9d1ba url("assets/archival_paper.jpg") center/cover;
  box-shadow:8px 12px 18px #0006;
  transform-origin:center center;
}
.page-underlay.one{
  transform:translate(-50%,-50%) translate(16px,10px) rotate(1.1deg)
}
.page-underlay.two{
  transform:translate(-50%,-50%) translate(-12px,7px) rotate(-.8deg)
}
#reportPage{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  display:block;
  width:auto;
  height:min(92%,540px);
  max-width:78%;
  object-fit:contain;
  transform:translate(-50%,-50%);
  background:#e2dbc5;
  box-shadow:9px 14px 24px #0008
}

.file-release,.related-file{
  position:relative;width:min(940px,96%);
  padding:48px;
  background:#ded6bf url("assets/archival_paper.jpg") center/cover;
  box-shadow:9px 15px 26px #0007
}
.small-clip{right:30px}
.release-row{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  border-top:1px solid #a49b85;padding:18px 0
}
.release-row:last-of-type{border-bottom:1px solid #a49b85}
.release-row span{display:block;font-size:.7rem;margin-top:4px}
.release-row button{border:1px solid #574f43;background:#c2b18d;padding:10px;cursor:pointer}
.release-row a{background:#27211b;color:#eee4cf;text-decoration:none;padding:11px 14px;font-weight:bold}
.related-entry{display:grid;gap:8px;border:1px solid #4a4439;padding:22px;margin:24px 0}
.related-entry b{font-size:2rem;color:var(--red)}
.related-entry em{width:max-content;background:#211c17;color:#eee3cd;padding:5px}
.related-seal{position:absolute;right:28px;bottom:24px;width:145px;opacity:.22}

@media(max-width:980px){
  .archive-open{grid-template-columns:1fr;padding:10px}
  .archive-content{border-left:0;border-top:18px solid rgba(80,64,44,.38);padding:20px}
  .index-paper{min-height:auto}
  .archive-nav{grid-template-columns:1fr 1fr}
  .active-panel{flex-direction:column}
  .summary-document,.evidence-photo{width:96%}
  .summary-document{min-height:auto}
  .folder-pocket{display:none}
}
@media(max-width:650px){
  .workspace{padding:12px}.desk-stitch{inset:6px}.bureau-mark{display:none}
  .archive-folder{width:100%;margin-top:10px}
  .archive-closed{padding:22px}
  .cover-document{min-height:600px;padding:55px 22px}
  .archive-index{padding:4px}.archive-content{padding:13px}
  .archive-nav{grid-template-columns:1fr}
  .object-toolbar,.report-controls{grid-template-columns:1fr;gap:8px}
  .object-toolbar span,.report-controls span{order:-1}
  .object-toolbar a,.object-toolbar button,.report-controls button{width:100%;text-align:center}
  .release-row{grid-template-columns:1fr 1fr}.release-row>div{grid-column:1/-1}
  .file-release,.related-file{padding:30px 20px}
  .page-stage{min-height:500px;padding:12px}
  #reportPage,.page-underlay{width:94%}
}

.summary-document h3{
  max-width:100%;
  white-space:normal;
  overflow-wrap:normal;
  word-break:keep-all;
}
@media (min-width:981px){
  .summary-document h3{font-size:clamp(1.75rem,2.55vw,3.1rem)}
}

.save-png-button{
  background:#27211b;
  color:#eee4cf;
  border:0;
  padding:11px 14px;
  font-weight:bold;
  cursor:pointer;
  white-space:nowrap;
}
.save-png-button:hover{filter:brightness(1.12)}
.save-png-button:disabled{opacity:.65;cursor:wait}

@media (min-width:981px){
  .archive-open{grid-template-columns:30% 1fr}
  .summary-document h3{font-size:clamp(1.5rem,2.1vw,2.6rem)}
  .summary-document p{font-size:.78rem}
  .summary-document strong{font-size:.78rem}
  .official-stamp{width:100px;height:100px}
  .evidence-photo small{font-size:.55rem}
}

@media (max-width:980px){
  html,body{height:auto;min-height:100%;overflow:auto}
  .workspace{height:auto;min-height:100vh;padding:18px 10px}
  .archive-folder{height:auto;min-height:720px;width:100%}
  .cover-document{height:auto;min-height:600px}
  .report-stack{height:auto;max-height:none}
  .page-stage{height:auto;min-height:540px}
}

@media(max-width:980px){
  #reportPage,.page-underlay{
    left:50%;
    top:50%;
    width:auto;
    height:min(90%,500px);
    max-width:90%;
  }
}