/* Latchworks — The Keyholders pre-launch site (host: latch.works).
   The desk scene is a fixed 1500x1000 design scaled to fit the viewport (latch.js
   sets --ls). Fonts: Cinzel (engraved), Playfair Display (Didot-like title),
   Special Elite (typewriter), with macOS system fonts preferred so it matches the
   approved mock on the design machine. */

html,body{margin:0;padding:0;height:100%;background:#160d07;color:#e9dcc2;
  font-family:'Special Elite','American Typewriter',Courier,monospace}
*{box-sizing:border-box}

.stage{position:fixed;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 70% 60% at 50% 24%, #3a2616, #1a100a 72%)}

.scene{position:relative;width:1500px;height:1000px;flex:none;overflow:hidden;
  transform:scale(var(--ls,1));transform-origin:center center;
  background-color:#241710;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 3px, rgba(255,228,190,.022) 3px 6px, transparent 6px 13px),
    linear-gradient(180deg,#412b1a 0%,#2a1b10 50%,#170e07 100%)}
.glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 52% at 50% 17%, rgba(236,180,98,.30), rgba(236,180,98,0) 58%)}
.vignette{position:absolute;inset:0;z-index:9;pointer-events:none;box-shadow:inset 0 0 230px 50px rgba(0,0,0,.62)}

.blotter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1210px;height:790px;border-radius:10px;z-index:2;
  background:
    radial-gradient(ellipse at 64% 70%, rgba(0,0,0,.34), transparent 46%),
    radial-gradient(ellipse at 30% 28%, rgba(150,58,40,.26), transparent 60%),
    radial-gradient(ellipse at 78% 30%, rgba(0,0,0,.26), transparent 40%),
    linear-gradient(180deg,#451f15,#321810 58%,#22110b);
  box-shadow:0 28px 64px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.5), inset 0 0 0 5px rgba(208,162,82,.30);
  outline:2px dashed rgba(208,162,82,.34);outline-offset:-16px}

.ring{position:absolute;z-index:3;border-radius:50%;border:5px solid rgba(64,32,14,.34)}
.splot{position:absolute;z-index:3;border-radius:50%;background:radial-gradient(circle at 40% 36%,rgba(18,9,4,.55),transparent 70%)}

.cup{position:absolute;z-index:6;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 44% 40%,#efe9dd,#cfc6b4);box-shadow:0 10px 20px rgba(0,0,0,.5)}
.cup::before{content:"";position:absolute;inset:11px;border-radius:50%;background:radial-gradient(circle at 42% 36%,#43230f,#1a0c04);box-shadow:inset 0 0 12px rgba(0,0,0,.7)}
.cup .handle{position:absolute;right:-13px;top:28px;width:22px;height:34px;border:7px solid #e7e0ce;border-left:none;border-radius:0 50% 50% 0 / 0 50% 50% 0;background:transparent}

.coin{position:absolute;z-index:5;border-radius:50%;box-shadow:0 3px 7px rgba(0,0,0,.55),inset 0 1px 2px rgba(255,255,255,.35),inset 0 -2px 3px rgba(0,0,0,.3)}
.clip{position:absolute;z-index:5;width:18px;height:48px;border:3px solid #c2c6cd;border-radius:9px;box-shadow:0 2px 5px rgba(0,0,0,.5)}
.clip::before{content:"";position:absolute;left:2.5px;top:6px;right:2.5px;bottom:13px;border:3px solid #c2c6cd;border-radius:7px}
.miniweb{position:absolute;inset:0;z-index:4;pointer-events:none}

.plate{position:absolute;left:50%;top:126px;transform:translateX(-50%);z-index:7;text-align:center;
  background:linear-gradient(180deg,#ecca78 0%,#bd954a 48%,#8c6c2c 100%);border:1px solid #6a4f1c;border-radius:5px;padding:13px 42px;
  box-shadow:0 8px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,246,214,.7)}
.plate .mk{font-family:'Cinzel','Copperplate',serif;font-size:33px;letter-spacing:10px;color:#2c1d07;text-shadow:0 1px 0 rgba(255,242,204,.45)}
.tag{position:absolute;left:50%;top:202px;transform:translateX(-50%);z-index:7;font-family:'Playfair Display','Didot',Georgia,serif;font-style:italic;color:#e6cfa2;font-size:21px;white-space:nowrap}

.string{position:absolute;inset:0;z-index:4;pointer-events:none}
.pin{position:absolute;z-index:6;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ecc873,#7a5a22);box-shadow:0 2px 5px rgba(0,0,0,.6)}

.wax{position:absolute;z-index:5;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#c5482f,#822518 72%);
  box-shadow:0 6px 13px rgba(0,0,0,.5),inset 0 -3px 6px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;color:#5e160d;font-family:'Cinzel','Copperplate',serif;font-size:20px}
.note{position:absolute;z-index:5;width:168px;background:#e9e1ce;color:#41331f;font-family:'Special Elite','American Typewriter',monospace;font-size:12px;line-height:1.5;padding:13px 14px;box-shadow:0 10px 20px rgba(0,0,0,.5);border-radius:1px}
.rd{display:inline-block;height:9px;background:#41331f;vertical-align:middle;opacity:.85;border-radius:1px}
.card{position:absolute;z-index:6;width:196px;height:108px;border-radius:6px;background:linear-gradient(180deg,#171220,#0d0a12);border:1px solid rgba(206,170,94,.45);
  box-shadow:0 11px 22px rgba(0,0,0,.55);color:#dcc079;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:'Cinzel','Copperplate',serif;text-align:center;cursor:pointer}
.card .kh{font-size:13px;letter-spacing:2px}
.card .cig{font-family:'Special Elite',monospace;font-size:11px;letter-spacing:3px;color:#9a875a}

/* books */
.book{position:absolute;z-index:5;width:312px;height:468px;cursor:pointer;transition:filter .2s ease, transform .2s ease;
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.58))}
/* a single page-block behind the cover, offset down-right, so the page edges on the
   right + bottom always meet at the corner (the old skewed pair left a gap) */
.book .pages{position:absolute;inset:0;z-index:-1;border-radius:5px;transform:translate(7px,8px);
  background:linear-gradient(135deg,#efe7d4,#d6cbb4);box-shadow:inset 0 0 0 1px rgba(150,120,80,.25),0 2px 6px rgba(0,0,0,.3)}

/* top-down magnifying glass (draggable — sweep it to reveal hidden ink) */
.magnifier{position:absolute;z-index:8;cursor:grab;touch-action:none}
.magnifier.drag{cursor:grabbing}
.magnifier .lens{width:104px;height:104px;border-radius:50%;border:8px solid #b3892f;pointer-events:none;
  background:radial-gradient(circle at 36% 30%, rgba(255,250,235,.16), rgba(120,110,95,.05) 55%, rgba(40,30,20,.16));
  -webkit-backdrop-filter:brightness(1.12) contrast(1.34) saturate(1.34);
  backdrop-filter:brightness(1.12) contrast(1.34) saturate(1.34);
  box-shadow:0 10px 22px rgba(0,0,0,.55), inset 0 2px 12px rgba(255,255,255,.2), inset 0 0 28px 5px rgba(22,15,8,.42)}
.magnifier .handle{position:absolute;left:80px;top:82px;width:18px;height:90px;border-radius:9px;transform:rotate(-40deg);transform-origin:top center;
  background:linear-gradient(90deg,#6e4f1e,#caa24a 50%,#6e4f1e);box-shadow:0 4px 10px rgba(0,0,0,.5)}
.b1{left:438px;top:356px;transform:rotate(-10deg);z-index:5}
.b2{left:688px;top:284px;transform:rotate(3.5deg);z-index:7}
.b3{left:958px;top:346px;transform:rotate(-3.5deg);z-index:6}
.b1:hover{transform:rotate(-10deg) translateY(-12px);filter:drop-shadow(0 34px 30px rgba(0,0,0,.6)) brightness(1.06)}
.b2:hover{transform:rotate(3.5deg) translateY(-12px);filter:drop-shadow(0 34px 30px rgba(0,0,0,.6)) brightness(1.06)}
.b3:hover{transform:rotate(-3.5deg) translateY(-12px);filter:drop-shadow(0 34px 30px rgba(0,0,0,.6)) brightness(1.06)}

.cover{position:absolute;top:0;left:0;width:900px;height:1350px;overflow:hidden;background-size:cover;background-position:center;border-radius:5px;transform:scale(.3467);transform-origin:top left;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.top{position:absolute;left:50%;transform:translateX(-50%);z-index:2;text-align:center;padding:28px 48px 32px;border-radius:13px}
.imprint{font-family:'Cinzel','Copperplate',serif;letter-spacing:7px;font-size:17px}
.title{font-family:'Playfair Display','Didot','Bodoni 72',Georgia,serif;line-height:.95;letter-spacing:1px;font-weight:600}
.rule{height:1px;margin:18px auto;opacity:.8}
.vol{font-family:'Special Elite','American Typewriter',monospace;letter-spacing:8px}
.sub{font-family:'Special Elite','American Typewriter',monospace;letter-spacing:2px}
.desc{font-family:'Special Elite','American Typewriter',monospace;letter-spacing:4px;font-size:15px;margin:18px auto 0;display:inline-block;padding-top:12px}
.v1 .top{top:62px;background:rgba(247,243,235,.46);border:1px solid rgba(122,31,31,.30)}
.v1 .imprint{color:#7a1f1f}.v1 .title{color:#1d140d;font-size:58px;margin-top:16px}
.v1 .rule{width:140px;background:#7a1f1f}.v1 .vol{color:#3a2c22;font-size:18px}
.v1 .sub{color:#1d140d;font-size:25px;margin-top:8px}.v1 .desc{color:#5a4632;border-top:1px solid rgba(122,31,31,.4)}
.v2 .top{top:80px;background:rgba(16,8,3,.60);border:1px solid rgba(220,181,94,.45)}
.v2 .imprint{color:#e0bb66}.v2 .title{font-size:56px;margin-top:14px;color:#f0d58c;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.v2 .rule{width:130px;background:#e0bb66;opacity:.8}.v2 .vol{color:#e0bb66;font-size:18px}
.v2 .sub{color:#f4e0a8;font-size:23px;margin-top:7px}.v2 .desc{color:#ecd49a;border-top:1px solid rgba(224,187,102,.55)}
.v3 .top{top:118px;background:rgba(9,9,11,.78);border:1px solid rgba(185,83,63,.55)}
.v3 .imprint{color:#e2dccf}.v3 .title{color:#f1ebdd;font-size:56px;margin-top:14px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.v3 .rule{width:130px;background:#c25a44}.v3 .vol{color:#cfc7b8;font-size:18px}
.v3 .sub{color:#f1ebdd;font-size:22px;margin-top:7px}.v3 .desc{color:#c8c0b1;border-top:1px solid rgba(194,90,68,.65)}
.v3 .stamp{position:absolute;z-index:3;top:545px;left:205px;transform:rotate(-9deg);color:#a83a2a;border:3px double #a83a2a;border-radius:4px;padding:7px 15px;font-family:'Cinzel','Copperplate',serif;font-size:23px;letter-spacing:4px;font-weight:bold;opacity:.82}

.foot{position:absolute;left:0;right:0;bottom:46px;text-align:center;z-index:8;color:#cbb083;font-size:14px;letter-spacing:2px}
.foot .sep{color:#8a6c44;margin:0 13px}.foot a{color:#eed28a;text-decoration:none}
.invite-pill{display:inline-block;margin-top:16px;border:1px solid #7a5528;border-radius:30px;padding:10px 24px;color:#f1d894;letter-spacing:3px;font-size:13px;cursor:pointer;
  background:linear-gradient(180deg,rgba(72,48,24,.6),rgba(38,24,12,.6));transition:background .2s}
.invite-pill:hover{background:linear-gradient(180deg,rgba(96,64,32,.75),rgba(52,32,16,.75))}

/* ── modals ─────────────────────────────────────────── */
.backdrop{position:fixed;inset:0;background:rgba(8,5,3,.76);z-index:50;display:none}
.backdrop.show{display:block}
.panel{position:fixed;z-index:60;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,540px);display:none;
  background:linear-gradient(180deg,#f3ecdb,#e6dac2);color:#2a1d12;border-radius:10px;padding:38px 40px 34px;
  box-shadow:0 30px 90px rgba(0,0,0,.75), inset 0 0 0 1px rgba(120,80,40,.35);
  font-family:'Special Elite','American Typewriter',monospace}
.panel.show{display:block}
.panel .pim{font-family:'Cinzel','Copperplate',serif;letter-spacing:6px;font-size:13px;color:#7a1f1f;text-align:center}
.panel h2{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:34px;letter-spacing:1px;margin:8px 0 2px;text-align:center;color:#1d140d}
.panel .pvol{text-align:center;letter-spacing:5px;font-size:14px;color:#5a4632;margin-bottom:18px}
.panel p{font-size:15px;line-height:1.6;color:#3a2c1e;margin:0 0 20px}
.panel .status{display:inline-block;background:#7a1f1f;color:#f3ecdb;letter-spacing:3px;font-size:12px;padding:5px 14px;border-radius:4px}
.panel .row{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.btn{border:none;border-radius:6px;padding:12px 22px;font-family:'Cinzel','Copperplate',serif;letter-spacing:2px;font-size:13px;cursor:pointer;text-decoration:none;display:inline-block}
.btn-primary{background:linear-gradient(180deg,#3a1d14,#23110b);color:#ecca78;box-shadow:inset 0 0 0 1px rgba(208,162,82,.5)}
.btn-ghost{background:transparent;color:#5a4632;box-shadow:inset 0 0 0 1px rgba(90,70,50,.4)}
.close-x{position:absolute;top:14px;right:18px;font-family:serif;font-size:22px;color:#7a5a3a;cursor:pointer;line-height:1;border:none;background:none}
.invite-form{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.invite-input{padding:13px 15px;border:1px solid rgba(120,80,40,.5);border-radius:6px;background:#fbf6ec;color:#2a1d12;font-family:'Special Elite',monospace;font-size:15px}
.invite-note{font-size:12px;color:#6a5640;text-align:center;margin-top:4px}

@media (max-width:640px){
  .panel{padding:30px 24px 26px}
  .panel h2{font-size:27px}
}

/* ── investigation desk: hidden ink, legible only under the magnifier ── */
.secret{position:absolute;font-family:'Special Elite','American Typewriter',monospace;font-size:18px;letter-spacing:3px;line-height:1.45;text-align:center;pointer-events:none;user-select:none}
.secret-base{z-index:3;color:rgba(220,200,170,.05)}
.hint-glint{position:absolute;z-index:3;width:7px;height:7px;border-radius:50%;pointer-events:none;
  background:rgba(214,194,154,.22);box-shadow:0 0 7px 2px rgba(214,194,154,.12)}
.reveal{position:absolute;inset:0;z-index:6;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle 60px at var(--mx,-600px) var(--my,-600px),#000 50%,transparent 70%);
  mask-image:radial-gradient(circle 60px at var(--mx,-600px) var(--my,-600px),#000 50%,transparent 70%)}
.reveal .secret{color:#eaf4d2;transform:scale(1.4);-webkit-text-stroke:.6px rgba(10,18,8,.72);paint-order:stroke fill;
  text-shadow:0 0 8px rgba(150,225,170,.7),-1px -1px 0 rgba(10,18,8,.92),1px -1px 0 rgba(10,18,8,.92),-1px 1px 0 rgba(10,18,8,.92),1px 1px 0 rgba(10,18,8,.92)}
.find-mass{position:absolute;width:66px;height:66px;pointer-events:none;
  border-radius:46% 54% 52% 48% / 50% 46% 54% 50%;filter:blur(1.6px);
  background:radial-gradient(circle at 42% 38%, rgba(150,185,140,.55), rgba(70,95,65,.28) 58%, transparent 76%)}
.find-mass.found{animation:massfound .6s ease}
@keyframes massfound{0%{transform:scale(.78)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
/* first-find flash — the discovered clue blooms full-bright, unmasked, for a beat */
.discovery{position:absolute;z-index:9;pointer-events:none;opacity:0;text-align:center;
  font-family:'Special Elite','American Typewriter',monospace;letter-spacing:3px;line-height:1.45;font-size:21px;
  color:#eaf3d6;-webkit-text-stroke:.7px rgba(10,18,8,.78);paint-order:stroke fill;
  text-shadow:0 0 16px rgba(150,230,170,.9),-1px -1px 0 rgba(10,18,8,.95),1px -1px 0 rgba(10,18,8,.95),-1px 1px 0 rgba(10,18,8,.95),1px 1px 0 rgba(10,18,8,.95)}
.discovery.show{animation:discover 2.4s ease forwards}
@keyframes discover{0%{opacity:0;transform:scale(.85)}14%{opacity:1;transform:scale(1.14)}26%{transform:scale(1)}70%{opacity:1}100%{opacity:0}}

/* ── Keyholder's Field Journal: a small moleskine on the desk + a parchment spread ── */
.journal{position:absolute;z-index:7;width:108px;height:138px;cursor:pointer;
  transition:transform .2s ease, filter .2s ease;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}
.journal::after{content:"";position:absolute;inset:-13px;border-radius:13px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(216,172,92,.28), rgba(216,172,92,0) 66%);animation:jpulse 2.8s ease-in-out infinite}
@keyframes jpulse{0%,100%{opacity:.4}50%{opacity:1}}
.journal:hover{transform:translateY(-12px) rotate(-2deg) scale(1.07);filter:drop-shadow(0 22px 28px rgba(0,0,0,.6)) brightness(1.12)}
.journal:hover::after{opacity:1;animation:none}
.journal .jcover{position:absolute;inset:0;border-radius:4px 9px 9px 4px;
  background:linear-gradient(125deg,#5c3f29 0%,#3c2716 58%,#281a0e 100%);
  box-shadow:inset -7px 0 12px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.45), inset 3px 3px 0 rgba(160,118,70,.28)}
.journal .jband{position:absolute;top:-3px;bottom:-3px;right:22px;width:12px;border-radius:2px;
  background:linear-gradient(90deg,#1a130b,#3a2c1e 45%,#1a130b);box-shadow:0 0 5px rgba(0,0,0,.5)}
.journal .jribbon{position:absolute;bottom:-15px;right:35px;width:7px;height:23px;
  background:linear-gradient(180deg,#9a2a2a,#641818);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
.journal .jmark{position:absolute;top:46%;left:40%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(224,184,104,.7);display:flex;align-items:center;justify-content:center;
  color:rgba(232,196,120,.88);font-family:'Cinzel','Copperplate',serif;font-size:17px;letter-spacing:1px;text-shadow:0 0 6px rgba(216,172,92,.5)}

.journal-book{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.95);z-index:60;display:none;opacity:0;
  width:min(94vw,880px);height:min(86vh,560px);padding:13px;border-radius:10px;
  background:linear-gradient(180deg,#140e08,#0a0705);
  box-shadow:0 40px 120px rgba(0,0,0,.8), inset 0 0 0 2px rgba(120,80,40,.45);
  transition:opacity .25s ease, transform .25s ease}
.journal-book.show{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1)}
.journal-book .spread{flex:1;display:flex;border-radius:6px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,#efe6cf,#e1d3b4)}
.journal-book .jpage{flex:1;padding:30px 34px;overflow:auto;color:#3a2c1a;position:relative;
  font-family:'Special Elite','American Typewriter',monospace}
.journal-book .jspine{width:3px;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.34) 50%,rgba(0,0,0,.12));
  box-shadow:0 0 20px 5px rgba(0,0,0,.28)}
.journal-book .jh{font-family:'Cinzel','Copperplate',serif;letter-spacing:4px;font-size:15px;color:#7a1f1f;
  border-bottom:1px solid rgba(122,31,31,.3);padding-bottom:8px;margin:0 0 16px}
.journal-book .jcount{position:absolute;top:31px;right:32px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;color:#8a6a44}
.journal-book .fe{margin-bottom:15px;line-height:1.5;font-size:14px}
.journal-book .fe .num{font-family:'Cinzel',serif;color:#7a1f1f;letter-spacing:2px;font-size:11px;display:block;margin-bottom:2px}
.journal-book .fe.missing .ln{color:#b6a78a;letter-spacing:2px;font-style:italic}
.journal-book .decode{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.journal-book .decode .slot{width:36px;height:46px;border:1px solid rgba(120,80,40,.55);border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:22px;color:#2a1f12;background:rgba(255,255,255,.28)}
.journal-book .decode .slot.empty{color:#c4b596}
.journal-book .jcap{margin-top:16px;font-size:12px;color:#6a5640;line-height:1.55;font-style:italic}
.journal-book .jcap b{color:#7a1f1f;font-style:normal}
.journal-book .close-j{position:absolute;top:6px;right:12px;z-index:3;border:none;background:none;color:#caa24a;font-family:serif;font-size:26px;cursor:pointer;line-height:1}

/* a stubby detective/golf pencil resting on the journal */
.pencil{position:absolute;z-index:8;width:13px;height:64px;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.pencil .pbody{position:absolute;top:13px;bottom:6px;left:0;right:0;border-radius:2px;
  background:linear-gradient(90deg,#6e1a10 0%,#c0472b 42%,#e2684c 52%,#7a1d12 100%);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.3)}
.pencil .ptip{position:absolute;top:0;left:0;width:13px;height:14px;
  background:linear-gradient(90deg,#b08a52,#ecd6a2 46%,#b08a52);clip-path:polygon(0 100%,100% 100%,50% 0)}
.pencil .plead{position:absolute;top:-3px;left:4.5px;width:4px;height:7px;background:#222;clip-path:polygon(0 100%,100% 100%,50% 0)}
.pencil .pband{position:absolute;bottom:0;left:0;width:13px;height:6px;border-radius:0 0 1px 1px;
  background:linear-gradient(90deg,#7e7e7e,#dadada 46%,#7e7e7e)}

/* ── /keyhole — the gated door ── */
.kh-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(ellipse 70% 60% at 50% 28%,#3a2616,#140c06 72%)}
.kh-card{width:min(94vw,460px);text-align:center;border-radius:12px;padding:44px 40px 34px;
  background:linear-gradient(180deg,#171009,#0b0704);
  box-shadow:0 40px 110px rgba(0,0,0,.8), inset 0 0 0 2px rgba(120,80,40,.45)}
.kh-card svg{display:block;margin:0 auto 4px}
.kh-card h1{font-family:'Cinzel','Copperplate',serif;letter-spacing:6px;font-size:24px;color:#e9c877;margin:12px 0 8px;text-shadow:0 1px 0 #5a3d12}
.kh-card p{font-family:'Special Elite','American Typewriter',monospace;color:#cbb083;font-size:14px;line-height:1.65;margin:0 0 18px}
.kh-card p b{color:#e9c877}
.kh-input{width:100%;padding:14px;text-align:center;letter-spacing:9px;font-size:22px;font-family:'Cinzel',serif;text-transform:uppercase;
  background:#0a0705;border:1px solid rgba(200,165,90,.4);border-radius:7px;color:#f1d894;margin-bottom:14px;box-sizing:border-box}
.kh-input::placeholder{color:#6a5836;letter-spacing:6px}
.kh-err{color:#d8704f;font-size:13px;margin:-4px 0 14px;font-family:'Special Elite',monospace}
.kh-back{display:inline-block;margin-top:22px;font-size:12px;color:#8a6c44;text-decoration:none;letter-spacing:2px;font-family:'Special Elite',monospace}
.fragment{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(22px);z-index:70;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,#f1e9d6,#e2d4ba);color:#3a2c1a;border:1px solid rgba(120,80,40,.45);border-radius:9px;
  padding:15px 26px;font-family:'Special Elite','American Typewriter',monospace;font-size:14px;letter-spacing:1px;max-width:90vw;text-align:center;
  box-shadow:0 18px 46px rgba(0,0,0,.6);transition:opacity .45s ease, transform .45s ease}
.fragment.show{opacity:1;transform:translateX(-50%) translateY(0)}
.fragment b{display:block;font-family:'Cinzel','Copperplate',serif;color:#7a1f1f;letter-spacing:3px;font-size:11px;margin-bottom:5px}

/* ── /signals — the public corkboard of tacked leads ─────────────────────── */
.board-stage {
  min-height: 100vh; position: relative;
  background:
    radial-gradient(120% 90% at 50% -10%, #3a251a 0%, #23140c 45%, #160c07 100%);
  padding: 30px 22px 70px; color: #efe4cb;
  font-family: "Playfair Display", Georgia, serif;
}
.board-corner {
  position: absolute; top: 20px; z-index: 3; text-decoration: none;
  font-family: "Special Elite", monospace; font-size: 0.8rem; letter-spacing: 1px;
  color: #cba556; border: 1px solid rgba(203,165,86,0.35); border-radius: 4px;
  padding: 7px 12px; background: rgba(0,0,0,0.3);
}
.board-corner:hover { color: #ecd393; border-color: #cba556; background: rgba(0,0,0,0.5); }
.board-back { left: 22px; } .board-print { right: 22px; }

.board-head { text-align: center; max-width: 640px; margin: 8px auto 26px; }
.board-kicker { font-family: "Special Elite", monospace; font-size: 0.72rem; letter-spacing: 5px; color: #9a7a31; }
.board-title { font-family: "Cinzel", serif; font-size: 2.5rem; color: #efe4cb; margin: 8px 0 2px; letter-spacing: 2px; }
.board-sub { font-family: "Playfair Display", serif; font-style: italic; font-size: 1.15rem; color: #cba556; }
.board-intro { margin: 16px auto 0; color: #cdb98f; font-size: 0.98rem; line-height: 1.65; max-width: 560px; }
.board-intro a, .board-foot a { color: #ecd393; text-decoration: none; border-bottom: 1px solid rgba(236,211,147,0.4); }

.board-cork {
  max-width: 1040px; margin: 0 auto; padding: 34px 26px;
  display: flex; flex-wrap: wrap; gap: 30px 34px; justify-content: center;
  background:
    repeating-radial-gradient(circle at 30% 20%, #7c5a34 0, #6e4f2d 2px, #74542f 4px);
  background-color: #6e4f2d;
  border: 10px solid #2c1a0e; border-radius: 8px;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.55), 0 18px 40px rgba(0,0,0,0.5);
}
.tack-card {
  position: relative; width: 234px; padding: 13px 13px 11px; text-decoration: none;
  background: #efe6d2; color: #241d12; border-radius: 2px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.45); transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.rot0 { transform: rotate(-3deg); } .rot1 { transform: rotate(2.4deg); }
.rot2 { transform: rotate(-1.6deg); } .rot3 { transform: rotate(3deg); } .rot4 { transform: rotate(-2.4deg); }
.tack-card:hover { transform: rotate(0deg) scale(1.045); box-shadow: 0 16px 30px rgba(0,0,0,0.55); z-index: 2; }
.tack {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #e7b45a 0%, #b5721f 55%, #7c3b12 100%);
  box-shadow: 0 3px 5px rgba(0,0,0,0.5), inset 0 -2px 3px rgba(0,0,0,0.35);
}
.tack-thumb { width: 100%; height: 180px; object-fit: cover; object-position: top center;
  border: 1px solid rgba(60,45,25,0.4); background: #ded3b8; }
.tack-cap { font-family: "Special Elite", monospace; font-size: 0.72rem; color: #4a3f28; text-align: center; line-height: 1.3; }
.tack-card.is-sealed { background: #cabfa4; opacity: 0.72; }
.tack-sealed { width: 100%; height: 150px; display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: #6e5f42; border: 1px dashed rgba(60,45,25,0.4); }

.board-foot { text-align: center; max-width: 620px; margin: 26px auto 0; color: #cdb98f; font-size: 0.9rem; line-height: 1.6; }
.board-foot b { color: #ecd393; }

.sig-lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 24px; }
.sig-lightbox:target { display: flex; }
.lb-scrim { position: absolute; inset: 0; background: rgba(8,5,3,0.86); backdrop-filter: blur(2px); }
.lb-panel {
  position: relative; z-index: 2; display: flex; gap: 32px; align-items: center;
  max-width: min(1460px, 96vw); max-height: 95vh; padding: 26px 30px; overflow: auto;
  background: linear-gradient(180deg, #2a1a0f, #1c110a); border: 1px solid rgba(203,165,86,0.4);
  border-radius: 8px; box-shadow: 0 30px 70px rgba(0,0,0,0.7);
}
.lb-img { max-width: min(1080px, 70vw); max-height: 92vh; width: auto; height: auto;
  border: 1px solid rgba(203,165,86,0.35); border-radius: 3px;
  box-shadow: 0 0 0 12px rgba(233,225,208,0.05), 0 16px 44px rgba(0,0,0,0.8); }
.lb-meta { max-width: 360px; flex: 0 0 auto; }
.lb-mark { font-family: "Special Elite", monospace; font-size: 0.92rem; letter-spacing: 2px; color: #b3893a; }
.lb-pips { color: #ecd393; margin-left: 6px; font-size: 1.05rem; }
.lb-meta b { display: block; font-family: "Cinzel", serif; font-size: 1.5rem; color: #efe4cb; margin: 14px 0 12px; line-height: 1.15; }
.lb-meta p { color: #d3c199; font-size: 1.12rem; font-style: italic; line-height: 1.6; }
.lb-cta { display: inline-block; margin-top: 20px; font-family: "Special Elite", monospace; font-size: 0.98rem;
  color: #1b0f09; background: #cba556; padding: 12px 18px; border-radius: 4px; text-decoration: none; }
.lb-cta:hover { background: #ecd393; }
.lb-close { position: absolute; top: 10px; right: 16px; z-index: 3; font-size: 2.2rem; color: #cba556; text-decoration: none; line-height: 1; }
@media (max-width: 620px) { .lb-panel { flex-direction: column; } .lb-img { max-width: 100%; } .lb-meta { max-width: 100%; } }

/* desk → signals board doorway */
.desk-board-tab {
  position: fixed; top: 16px; right: 16px; z-index: 40; text-decoration: none;
  font-family: "Special Elite", monospace; font-size: 0.78rem; letter-spacing: 1px;
  color: #3a2a16; background: linear-gradient(180deg, #e7c46a, #cba556);
  padding: 8px 13px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  transform: rotate(2deg); border: 1px solid #a6812f;
}
.desk-board-tab:hover { background: #ecd393; transform: rotate(0deg); }
.tab-tack { vertical-align: -2px; margin-right: 4px; }

/* ── /library — the paid editions ───────────────────────────────────────── */
.lib-lines { max-width: 940px; margin: 8px auto 0; }
.lib-line { margin-bottom: 34px; }
.lib-line-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid rgba(203,165,86,0.28); padding-bottom: 8px; }
.lib-line-name { font-family: "Cinzel", serif; font-size: 1.5rem; color: #efe4cb; margin: 0; letter-spacing: 1px; }
.lib-tag { font-family: "Special Elite", monospace; font-size: 0.74rem; letter-spacing: 2px; color: #9a7a31; }
.lib-note { color: #cdb98f; font-size: 0.92rem; font-style: italic; margin: 8px 0 16px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); gap: 18px; }
.lib-card {
  display: flex; flex-direction: row; gap: 16px; align-items: flex-start; padding: 16px; border-radius: 6px;
  background: linear-gradient(180deg, #2a1a0f, #1e130b); border: 1px solid rgba(203,165,86,0.22);
}
.lib-card.is-soon { opacity: 0.68; }
.lib-cover { flex: 0 0 auto; width: 94px; height: auto; border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.5); box-shadow: 0 7px 16px rgba(0,0,0,0.55); background: #14100a; }
.lib-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lib-title { font-family: "Cinzel", serif; font-size: 1rem; color: #efe4cb; }
.lib-blurb { color: #cdb98f; font-size: 0.86rem; line-height: 1.5; margin: 7px 0 0; flex: 1; }
.lib-buys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.buy { font-family: "Special Elite", monospace; font-size: 0.78rem; text-decoration: none; padding: 8px 13px; border-radius: 4px; }
.buy.is-etsy { background: #cba556; color: #1b0f09; border: 1px solid #cba556; }
.buy.is-etsy:hover { background: #ecd393; }
.buy.is-kdp, .buy.is-ls { color: #cba556; border: 1px solid rgba(203,165,86,0.5); background: transparent; }
.buy.is-kdp:hover, .buy.is-ls:hover { border-color: #cba556; color: #ecd393; }
.buy.is-comingsoon { color: #9a8358; border: 1px dashed rgba(154,131,49,0.5); }

/* desk doorways — a small stacked nav of tabs */
.desk-nav { position: fixed; top: 14px; right: 14px; z-index: 40; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
.desk-tab {
  text-decoration: none; font-family: "Special Elite", monospace; font-size: 0.76rem; letter-spacing: 1px;
  color: #3a2a16; background: linear-gradient(180deg, #e7c46a, #cba556);
  padding: 7px 12px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  transform: rotate(2deg); border: 1px solid #a6812f;
}
.desk-tab:nth-child(2) { transform: rotate(-1.5deg); }
.desk-tab:hover { background: #ecd393; transform: rotate(0deg); }

/* /wire — the lookout's post (Signal I·f reveal) */
.wire-stage { display: flex; align-items: center; justify-content: center; text-align: center; }
.wire-inner { max-width: 540px; }
.wire-word { font-family: "Cinzel", serif; font-size: 2.7rem; letter-spacing: 8px; color: #ecd393; margin: 20px 0 6px; }
.wire-check { font-family: "Special Elite", monospace; font-size: 0.92rem; color: #9a7a31; letter-spacing: 3px; }

/* /reading — the Reading Room reference */
.rr { max-width: 740px; margin: 0 auto; }
.rr-check { padding: 16px 20px; border: 1px solid rgba(203,165,86,0.28); border-radius: 8px; background: rgba(0,0,0,0.2); margin-bottom: 28px; }
.rr h2 { font-family: "Cinzel", serif; color: #ecd393; font-size: 1.18rem; margin: 0 0 8px; }
.rr-check p, .rr-check li { color: #cdb98f; font-size: 0.92rem; line-height: 1.6; }
.rr-check ul { margin: 6px 0; padding-left: 20px; }
.rr-check b, .rr-way b + p b { color: #efe4cb; }
.rr-h { text-align: center; font-family: "Cinzel", serif; color: #efe4cb; margin: 8px 0 16px; }
.rr-ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.rr-way { padding: 14px 16px; border: 1px solid rgba(203,165,86,0.16); border-radius: 6px; background: rgba(0,0,0,0.15); }
.rr-way b { font-family: "Cinzel", serif; color: #ecd393; font-size: 0.98rem; }
.rr-way p { color: #cdb98f; font-size: 0.86rem; line-height: 1.55; margin: 6px 0 0; }
.rr-primer { max-width: 620px; margin: 26px auto 0; text-align: center; color: #cdb98f; font-size: 0.93rem; line-height: 1.6; }
.rr a, .rr-primer a, .board-intro a { color: #ecd393; }

.rr-kicker { white-space: nowrap; }

/* ── /signals — slim header + in-universe wall-objects flanking the board ── */
.board-head-slim { max-width: 720px; margin: 4px auto 8px; }
.sig-frame {
  max-width: 1900px; margin: 8px auto 0;
  display: grid; grid-template-columns: 1fr minmax(0, 1040px) 1fr; gap: 30px; align-items: start;
}
.rail { display: flex; flex-direction: column; gap: 26px; padding-top: 34px; }
.rail-l { align-items: flex-end; }
.rail-r { align-items: flex-start; }
.wall-note {
  position: relative; width: 252px; padding: 17px 17px 15px; border-radius: 2px;
  background: #efe6d2; color: #2a2316; box-shadow: 0 11px 22px rgba(0,0,0,0.45);
  font-family: "Special Elite", monospace; font-size: 0.86rem; line-height: 1.55; transform: rotate(-2deg);
}
.wall-note a { color: #7a3b12; }
.wn-index { transform: rotate(1.6deg); text-decoration: none; display: block; text-align: center; }
.wn-index b { display: block; font-family: "Cinzel", serif; color: #241d12; font-size: 0.96rem; margin-bottom: 4px; }
.wn-index span { color: #6a4a24; font-size: 0.82rem; }
.wn-pin {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #e7b45a 0%, #b5721f 55%, #7c3b12 100%);
  box-shadow: 0 3px 5px rgba(0,0,0,0.5), inset 0 -2px 3px rgba(0,0,0,0.35);
}
.decoder-card {
  position: relative; width: 258px; display: block; text-align: center; text-decoration: none;
  background: linear-gradient(180deg, #241a12, #17110b); border: 1px solid rgba(203,165,86,0.4);
  border-radius: 8px; padding: 18px 18px 16px; transform: rotate(1.4deg); box-shadow: 0 12px 24px rgba(0,0,0,0.55);
}
.decoder-card img { width: 176px; height: 176px; display: block; margin: 4px auto 2px; }
.decoder-card b { display: block; font-family: "Cinzel", serif; color: #ecd393; margin-top: 8px; font-size: 1.05rem; }
.decoder-card span { display: block; color: #cdb98f; font-size: 0.82rem; line-height: 1.5; margin-top: 5px; }
.decoder-card:hover { border-color: #cba556; }

@media (max-width: 1560px) {
  .sig-frame { display: flex; flex-direction: column; align-items: center; max-width: 1080px; }
  .board-cork { order: 1; }
  .rail-l { order: 2; } .rail-r { order: 3; }
  .rail { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; padding-top: 26px; }
}

/* keyhole pin-recovery + live-status touches */
.panel .status-live{background:#2e5a2e}
.kh-pinlab{font-family:'Cinzel','Copperplate',serif;letter-spacing:2px;color:#ecca78;font-size:15px}
.kh-pips{color:#caa24a;font-size:12px;letter-spacing:2px}
.kh-more{font-size:12.5px;color:#8a795c;margin-top:14px}
.kh-more a{color:#caa24a}