/* ============================================================================
   SCRIPTURAL FORENSICS — SHARED STYLES
   The detective records room. Dark front, amber lamp light, metal cabinets,
   manila folders, the Evidence Room door. Locked aesthetic.
   ============================================================================ */

:root{
  --display:'Special Elite', monospace;
  --body:'Spectral', serif;
  --label:'Oswald', sans-serif;

  --paper:#e9e3d4;
  --folder:#c9a867;
  --folder-shadow:#9a7a3c;
  --amber:#f2c25a;
  --amber-glow:#ffdf94;
  --metal-hi:#7e828c;
  --metal:#565a64;
  --metal-lo:#34373e;
  --steel-dark:#23252b;

  --wood-hi:#7a4f2e;
  --wood:#6e4a2c;
  --wood-mid:#5c3c24;
  --wood-lo:#4a2f1b;
  --wood-dark:#2a1d12;
  --brass-hi:#e6cd8e;
  --brass:#9a7a3c;
  --grain:repeating-linear-gradient(91deg, rgba(0,0,0,0.05) 0 3px, transparent 3px 9px);

  --ink:#2a2622;
  --red:#b3402f;
  --red-stamp:#d9583f;
  --dust:#8a8472;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:#000;font-family:var(--body);color:#d8d2c4;
  overflow-x:hidden;min-height:100vh;
}
/* film grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- the room background ---------- */
.room{
  position:relative;min-height:100vh;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 6%, rgba(242,194,90,0.15), rgba(242,194,90,0.03) 38%, transparent 62%),
    linear-gradient(180deg,#1a1814 0%,#141310 30%,#0c0b09 68%,#060504 100%);
  transition:filter 1s ease;padding-bottom:120px;
}
.blinds{
  position:absolute;top:0;left:0;right:0;height:55%;pointer-events:none;z-index:1;opacity:0.45;
  background:repeating-linear-gradient(8deg, transparent 0 26px, rgba(0,0,0,0.42) 26px 30px);
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 65% 70% at 60% 0%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 65% 70% at 60% 0%, #000 30%, transparent 75%);
}
.lamp{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;}
.lamp-cord{width:2px;height:46px;margin:0 auto;background:linear-gradient(180deg,#000,#2a2620);}
.lamp-shade{
  width:110px;height:42px;margin:0 auto;
  background:linear-gradient(180deg,#3a3026,#1c1812);
  border-radius:50% 50% 12% 12%/70% 70% 30% 30%;
  box-shadow:inset 0 -6px 14px rgba(0,0,0,0.6),0 2px 6px rgba(0,0,0,0.7);position:relative;
}
.lamp-shade::after{
  content:"";position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);
  width:50px;height:9px;border-radius:50%;
  background:radial-gradient(ellipse,var(--amber-glow),var(--amber) 60%,transparent);
  box-shadow:0 0 30px 10px rgba(242,194,90,0.5);
}
.wrap{position:relative;z-index:3;padding:0 22px;max-width:900px;margin:0 auto;}
.wrap.narrow{max-width:760px;}

/* ---------- top nav ---------- */
.topbar{
  position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;
  max-width:900px;margin:0 auto;padding:22px 22px 0;
}
.topbar .home-link{
  font-family:var(--display);font-size:1.05rem;color:#e7e1d2;text-decoration:none;letter-spacing:0.02em;
}
.topbar .home-link:hover{color:var(--amber);}
.topbar nav a{
  font-family:var(--label);font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--dust);text-decoration:none;margin-left:22px;
}
.topbar nav a:hover{color:var(--amber);}

/* ---------- masthead ---------- */
.masthead{text-align:center;padding:90px 0 10px;position:relative;}
.stencil{
  font-family:var(--label);font-weight:600;letter-spacing:0.5em;font-size:0.7rem;
  text-transform:uppercase;color:var(--amber);opacity:0.85;margin-bottom:22px;
}
.masthead h1{
  font-family:var(--display);font-size:clamp(2.4rem,7vw,4.8rem);color:#f3ecdb;
  line-height:0.98;letter-spacing:0.03em;text-shadow:0 0 30px rgba(242,194,90,0.22),0 3px 0 #000;
}
.masthead .sub{font-style:italic;font-size:clamp(1rem,2.4vw,1.3rem);color:#cfc7b5;margin-top:20px;opacity:0.9;}
.credo{max-width:580px;margin:30px auto 0;text-align:center;line-height:1.75;font-size:1.04rem;color:#bdb6a6;opacity:0.85;}

.section-label{
  text-align:center;font-family:var(--label);font-weight:500;letter-spacing:0.32em;
  text-transform:uppercase;font-size:0.76rem;color:var(--dust);margin:64px 0 32px;
}

/* ---------- the cabinet wall (home) ---------- */
.cabinet-wall{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
@media (max-width:680px){.cabinet-wall{grid-template-columns:1fr;}}

.cabinet-card{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--grain), linear-gradient(90deg,#5a3a22 0%,#6e4a2c 50%,#4a2f1b 100%);
  border-radius:5px 5px 4px 4px;overflow:hidden;padding-bottom:6px;
  box-shadow:0 12px 28px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.3);
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
}
.cabinet-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:15px;
  background:var(--grain), linear-gradient(180deg,#7a4f2e,#5a3a22);
  box-shadow:inset 0 1px 0 rgba(255,210,150,0.15);
}
.cabinet-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(0,0,0,0.65),0 0 0 1px rgba(242,194,90,0.3);}

/* the two drawer fronts at the top of each card */
.cabinet-card .card-drawers{padding:22px 10px 0;}
.cabinet-card .cd-row{
  position:relative;height:54px;margin-bottom:7px;border-radius:3px;
  background:var(--grain), linear-gradient(180deg,#6e4a2c 0%,#5c3c24 50%,#4a2f1b 100%);
  box-shadow:inset 0 1px 0 rgba(255,210,150,0.12), inset 0 -2px 5px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.4);
}
.cabinet-card .cd-row .cd-pull{
  position:absolute;left:50%;top:11px;transform:translateX(-50%);
  width:50px;height:10px;border-radius:5px;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass));
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),0 1px 2px rgba(0,0,0,0.5);
}
.cabinet-card .cd-row .cd-plate{
  position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
  font-family:var(--label);font-size:0.48rem;letter-spacing:0.18em;text-transform:uppercase;
  background:var(--wood-dark);color:#e0d2b8;padding:2px 10px;border-radius:2px;white-space:nowrap;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.6);
}
.cabinet-card .card-body{padding:14px 22px 22px;}
.cabinet-card .cno{font-family:var(--label);font-size:0.62rem;letter-spacing:0.26em;text-transform:uppercase;color:var(--amber);opacity:0.85;}
.cabinet-card h3{font-family:var(--body);font-weight:600;font-size:1.2rem;color:#f3e6d2;margin:6px 0 10px;line-height:1.25;}
.cabinet-card p{font-size:0.9rem;line-height:1.55;color:#cbb89e;}
.cabinet-card .count{
  margin-top:16px;font-family:var(--label);font-size:0.64rem;letter-spacing:0.16em;text-transform:uppercase;color:#b09a7c;
  display:flex;align-items:center;gap:8px;
}
.cabinet-card .count .dot{width:6px;height:6px;border-radius:50%;background:var(--red-stamp);box-shadow:0 0 6px var(--red-stamp);}
.cabinet-card .feeds{margin-top:10px;font-family:var(--label);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--brass-hi);opacity:0.85;}

/* ---------- cabinet page: the drawers ---------- */
.cab-head{text-align:center;padding:24px 0 6px;}
.cab-no{font-family:var(--label);font-weight:600;letter-spacing:0.4em;font-size:0.68rem;text-transform:uppercase;color:var(--amber);opacity:0.85;margin-bottom:16px;}
.cab-head h1{font-family:var(--display);font-size:clamp(1.8rem,5vw,3rem);color:#f3ecdb;line-height:1.08;letter-spacing:0.02em;text-shadow:0 0 26px rgba(242,194,90,0.22),0 3px 0 #000;}
.cab-head .desc{font-style:italic;font-size:1.04rem;color:#bdb6a6;opacity:0.85;margin:18px auto 0;max-width:600px;line-height:1.6;}

.cabinet-zone{display:flex;justify-content:center;perspective:1600px;}
.cabinet{width:100%;max-width:620px;position:relative;transform-style:preserve-3d;transform:rotateX(1.5deg);filter:drop-shadow(0 44px 46px rgba(0,0,0,0.7));}
.cab-cap{height:22px;background:var(--grain), linear-gradient(180deg,#7a4f2e,#5a3a22);border-radius:6px 6px 0 0;box-shadow:inset 0 2px 2px rgba(255,210,150,0.18),inset 0 -3px 6px rgba(0,0,0,0.5);}
.cab-cap.bottom{border-radius:0 0 6px 6px;height:16px;}
.cab-body{background:var(--grain), linear-gradient(90deg,#5a3a22 0%,#6e4a2c 8%,#714c2d 50%,#5c3c24 92%,#48301c 100%);padding:8px;border-left:2px solid #2a1d12;border-right:2px solid #2a1d12;box-shadow:inset 0 0 30px rgba(0,0,0,0.5);}

.drawer{position:relative;margin-bottom:8px;}
.drawer:last-child{margin-bottom:0;}
.drawer-face{
  position:relative;z-index:2;
  background:var(--grain), linear-gradient(180deg,#714c2d 0%,#5c3c24 45%,#4a2f1b 100%);
  border-radius:3px;padding:18px 22px;display:flex;align-items:center;gap:18px;cursor:pointer;
  box-shadow:inset 0 2px 1px rgba(255,210,150,0.14),inset 0 -3px 5px rgba(0,0,0,0.45),0 3px 5px rgba(0,0,0,0.4);
  transition:box-shadow 0.4s ease;
}
.drawer-face:hover{box-shadow:inset 0 2px 1px rgba(255,210,150,0.2),inset 0 -3px 5px rgba(0,0,0,0.45),0 6px 12px rgba(0,0,0,0.5),0 0 0 1px rgba(242,194,90,0.3);}
.label-plate{background:linear-gradient(180deg,#2a1d12,#3a2818);border:1px solid #1a1009;border-radius:3px;padding:6px 14px;min-width:160px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.7);}
.label-plate .cn{font-family:var(--label);font-size:0.56rem;letter-spacing:0.26em;text-transform:uppercase;color:var(--amber);opacity:0.85;}
.label-plate .cnm{font-family:var(--label);font-weight:600;font-size:0.94rem;color:#ece0cd;letter-spacing:0.02em;margin-top:1px;line-height:1.15;}
.pull{margin-left:auto;flex-shrink:0;width:70px;height:18px;border-radius:9px;background:linear-gradient(180deg,#e6cd8e 0%,#b8923f 45%,#8a6a30 55%,#c9a35b 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,0.45),inset 0 -2px 3px rgba(0,0,0,0.4),0 2px 3px rgba(0,0,0,0.5);position:relative;}
.pull::after{content:"";position:absolute;inset:4px 9px;border-radius:6px;background:linear-gradient(180deg,rgba(0,0,0,0.25),rgba(255,255,255,0.15));}
.status{position:absolute;top:7px;right:13px;font-family:var(--label);font-size:0.54rem;letter-spacing:0.2em;text-transform:uppercase;color:#a8906e;}
.status.reopened{color:var(--red-stamp);}

.drawer-interior{height:0;overflow:hidden;transition:height 0.55s cubic-bezier(0.16,1,0.3,1);background:linear-gradient(180deg,#0a0a0c,#050506);border-radius:0 0 3px 3px;box-shadow:inset 0 14px 24px rgba(0,0,0,0.8);}
.drawer.active .drawer-interior{height:auto;}
.folder{
  margin:18px;background:linear-gradient(176deg,#d9b86e,#b8954a);border-radius:3px 16px 3px 4px;position:relative;
  transform:translateY(40px);opacity:0;
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1) 0.1s,opacity 0.35s ease 0.1s;
  box-shadow:0 18px 34px rgba(0,0,0,0.6);
}
.drawer.active .folder{transform:translateY(0);opacity:1;}
.folder-tab{position:absolute;top:-20px;left:24px;background:#d9cfb6;color:#2a2418;font-family:var(--label);font-weight:700;font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;padding:6px 18px 5px;border-radius:5px 5px 0 0;box-shadow:0 -2px 5px rgba(0,0,0,0.25);}
.folder-inner{padding:30px 28px 24px;}
.folder-inner .fq{font-style:italic;color:#4a4334;font-size:1rem;line-height:1.55;margin-bottom:18px;}
.folder-inner .open-file{
  display:inline-block;font-family:var(--label);font-weight:600;font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--folder-shadow);padding:10px 20px;border-radius:3px;background:rgba(0,0,0,0.05);text-decoration:none;transition:background 0.2s;
}
.folder-inner .open-file:hover{background:rgba(0,0,0,0.13);}
.folder-inner .pending-note{font-family:var(--label);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:#7a6f4f;}

/* ---------- case file page ---------- */
.sheet{background:var(--paper);max-width:720px;margin:30px auto 0;border-radius:3px;padding:54px 56px;color:var(--ink);box-shadow:0 20px 50px rgba(0,0,0,0.6);position:relative;}
.sheet::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--red) 0 18px,transparent 18px 30px);opacity:0.55;border-radius:3px 3px 0 0;}
.stamp{position:absolute;top:30px;right:38px;border:3px solid var(--red);color:var(--red);font-family:var(--label);font-weight:700;font-size:0.84rem;letter-spacing:0.12em;text-transform:uppercase;padding:7px 13px;border-radius:4px;transform:rotate(-9deg);opacity:0.72;}
.file-meta{font-family:var(--label);font-size:0.64rem;letter-spacing:0.24em;text-transform:uppercase;color:#9a8e74;margin-bottom:6px;}
.sheet h1.case-title{font-family:var(--display);font-size:clamp(1.6rem,4vw,2.2rem);color:#1a1714;line-height:1.12;margin-bottom:8px;}
.case-q{font-style:italic;font-size:1.1rem;color:#5a5346;margin-bottom:26px;border-left:3px solid var(--folder);padding-left:16px;line-height:1.5;}
.field-label{font-family:var(--label);font-weight:600;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--red);margin:30px 0 10px;padding-bottom:6px;border-bottom:1px solid #cabfa3;}
.sheet p{font-size:1.04rem;line-height:1.72;margin-bottom:15px;color:#332e27;}
.scripture{background:rgba(201,168,103,0.16);border-left:3px solid var(--folder);padding:15px 20px;margin:16px 0;font-style:italic;color:#3a342b;font-size:1rem;line-height:1.6;border-radius:0 3px 3px 0;}
.scripture cite{display:block;font-style:normal;font-family:var(--label);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--folder-shadow);margin-top:9px;}
.finding-box{background:#1f1c16;color:#e9e3d4;border-radius:5px;padding:26px 30px;margin:30px 0 8px;border:1px solid #4a3f28;box-shadow:0 6px 16px rgba(0,0,0,0.3);}
.finding-box .field-label{color:var(--amber);border-bottom-color:#4a3f28;margin-top:0;}
.finding-box p{color:#e0d9c8;margin-bottom:0;}

.to-door{text-align:center;margin-top:34px;padding-top:26px;border-top:1px dashed #cabfa3;}
.to-door .lead{font-style:italic;color:#5a5346;font-size:1rem;margin-bottom:12px;}
.to-door .doorlink{display:inline-block;font-family:var(--label);font-weight:600;font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink);border:1px solid var(--folder-shadow);padding:12px 24px;border-radius:3px;background:rgba(0,0,0,0.05);cursor:pointer;transition:background 0.2s;}
.to-door .doorlink:hover{background:rgba(0,0,0,0.13);}

/* ---------- Evidence Room door ---------- */
.door-zone{max-width:560px;margin:96px auto 0;text-align:center;position:relative;z-index:3;}
.door-zone .lead{font-style:italic;opacity:0.8;margin-bottom:34px;font-size:1.05rem;}
.door-frame{width:260px;height:366px;margin:0 auto;position:relative;perspective:1300px;}
.room-behind{position:absolute;inset:0;border-radius:5px 5px 0 0;overflow:hidden;background:linear-gradient(180deg,#1a1813,#0e0d0a);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.4s ease;z-index:1;}
.room-behind .shelf{position:absolute;inset:24px 20px;background:repeating-linear-gradient(0deg, transparent 0 34px, rgba(0,0,0,0.4) 34px 40px);opacity:0;}
.room-behind .rlabel{font-family:var(--display);color:var(--amber-glow);font-size:1.02rem;letter-spacing:0.1em;text-shadow:0 0 18px rgba(255,223,148,0.8);opacity:0;z-index:2;}
.door-frame.open .room-behind{opacity:1;background:radial-gradient(ellipse at 50% -10%, rgba(255,223,148,0.55), transparent 65%),linear-gradient(180deg,#403922,#1f1c12);}
.door-frame.open .room-behind .shelf{opacity:0.6;transition:opacity 0.5s ease 0.5s;}
.door-frame.open .room-behind .rlabel{opacity:1;transition:opacity 0.5s ease 0.65s;}
.door{position:absolute;inset:0;z-index:3;background:linear-gradient(100deg,#2a2c31,#1e2025);border:4px solid #15161a;border-radius:5px 5px 0 0;transform-origin:left center;transform:rotateY(0);transition:transform 1.05s cubic-bezier(0.65,0,0.35,1);cursor:pointer;box-shadow:inset 0 0 50px rgba(0,0,0,0.7),0 12px 34px rgba(0,0,0,0.6);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.door .frosted{width:74%;height:40%;background:linear-gradient(135deg, rgba(242,194,90,0.12), rgba(200,180,140,0.03));border:3px solid #34363d;border-radius:3px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 26px rgba(0,0,0,0.5);}
.door .frosted span{font-family:var(--display);font-size:1.02rem;letter-spacing:0.08em;color:var(--amber);text-align:center;line-height:1.35;text-shadow:0 0 14px rgba(242,194,90,0.45);}
.door .knob{position:absolute;right:20px;top:50%;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e6cd8e,#8a6f33);box-shadow:0 1px 3px rgba(0,0,0,0.7);}
.door-frame.open .door{transform:rotateY(-108deg);}
.door-prompt{position:absolute;bottom:-38px;left:0;right:0;font-family:var(--label);font-size:0.7rem;letter-spacing:0.24em;text-transform:uppercase;color:#7a7468;animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:0.4;}50%{opacity:0.95;}}
.enter-line{margin-top:60px;opacity:0;transition:opacity 0.6s ease;color:var(--amber);font-family:var(--label);font-size:0.9rem;letter-spacing:0.18em;text-transform:uppercase;}
.enter-line.show{opacity:0.95;}
.enter-line a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(242,194,90,0.4);}
.flash{position:fixed;inset:0;pointer-events:none;z-index:8000;opacity:0;}
.flash.fire{animation:flash 1.2s ease-out;}
@keyframes flash{0%{opacity:0;}22%{opacity:0.6;background:radial-gradient(ellipse at 50% 38%, rgba(255,223,148,0.7), transparent 70%);}100%{opacity:0;}}
.room.lit{filter:brightness(1.1);}

/* ---------- footer ---------- */
.site-foot{position:relative;z-index:3;text-align:center;margin-top:90px;padding:30px 22px 0;border-top:1px solid rgba(138,132,114,0.2);max-width:760px;margin-left:auto;margin-right:auto;}
.site-foot p{font-family:var(--label);font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--dust);line-height:1.8;}
.site-foot a{color:var(--folder);text-decoration:none;}
.site-foot a:hover{color:var(--amber);}

@media (max-width:560px){
  .sheet{padding:34px 24px;}
  .stamp{top:18px;right:16px;font-size:0.7rem;}
  .label-plate{min-width:120px;}
  .masthead{padding:60px 0 10px;}
}