/* RESET */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;line-height:1.4;-webkit-font-smoothing:antialiased}

/* TOKENS + LAYOUT VARS */
:root{
  --paper:#f1ecd9; --paper-2:#fffdf5; --blk:#000; --wht:#fff;
  --m-red:#ff4d4d; --m-yellow:#ffc400; --m-blue:#2b7cff;
  --shadow:0 14px 0 var(--blk);
  --h1:clamp(48px, 8.5vw, 112px); --lead:clamp(16px, 1.7vw, 20px);
  --rail-left: 180px; --rail-right: 180px; --page-gap: 16px;
}

/* BASE */
body{background:var(--paper);font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;color:var(--blk);display:flex}

/* When gate is open, blur & freeze everything except the gate */
body.gated main.page, body.gated .sidenav, body.gated .railnav{filter:blur(6px); pointer-events:none; user-select:none}

/* LEFT SITE NAV */
.sidenav{position:fixed;inset:0 auto 0 0;width:var(--rail-left);background:var(--wht);border-right:4px solid var(--blk);display:flex;flex-direction:column;font-family:"IBM Plex Mono",monospace;z-index:900}
.sidenav a{padding:18px 16px;text-decoration:none;color:var(--blk);font-weight:700;font-size:14px;border-bottom:3px solid var(--blk);text-transform:uppercase;letter-spacing:.05em;background:var(--wht)}
.sidenav a:hover{background:var(--m-yellow)} .sidenav a.active{background:var(--blk);color:var(--wht)}

/* RIGHT ACTION RAIL */
.railnav{position:fixed;inset:0 0 0 auto;width:var(--rail-right);background:var(--wht);border-left:4px solid var(--blk);display:flex;flex-direction:column;font-family:"IBM Plex Mono",monospace;z-index:900}
.railnav .rail-title{padding:14px 16px;border-bottom:3px solid var(--blk);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.railnav a{padding:14px 16px;text-decoration:none;color:var(--blk);font-weight:700;font-size:13px;border-bottom:3px solid var(--blk);text-transform:uppercase;letter-spacing:.04em;background:var(--wht)}
.railnav a:hover{background:var(--m-yellow)} .railnav a.active{background:var(--blk);color:var(--wht)}

/* CENTER PAGE FRAME — FLUID */
.page{
  width: calc(100vw - var(--rail-left) - var(--rail-right) - (var(--page-gap)*2));
  margin-left: calc(var(--rail-left) + var(--page-gap));
  margin-right: calc(var(--rail-right) + var(--page-gap));
  margin-top:24px;margin-bottom:80px;
  background:var(--paper-2);border:4px solid var(--blk);box-shadow:var(--shadow);
  padding: clamp(12px, 1.8vw, 22px);max-width:1600px; z-index:1;
}

/* MASTHEAD */
.masthead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:4px solid var(--blk);padding:10px 0 12px}
.labmark{display:flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:14px;text-decoration:none;color:var(--blk);border:3px solid var(--blk);padding:6px 10px;background:var(--wht);box-shadow:4px 4px 0 var(--blk)}
.lablogo{font-size:18px;line-height:1;background:var(--m-yellow);padding:2px 5px;border:2px solid var(--blk)}
.wordmark{font-family:"Archivo Black",system-ui,sans-serif;font-size:clamp(22px,3vw,34px);text-decoration:none;color:var(--blk);border:3px solid var(--blk);padding:6px 10px;background:var(--wht);box-shadow:6px 6px 0 var(--blk)}
.stamp{justify-self:end;width:48px;height:48px;border:3px solid var(--blk);border-radius:10px;position:relative}
.stamp svg{position:absolute;inset:8px}

/* HERO */
.hero{margin-top:18px;border:4px solid var(--blk);background:linear-gradient(180deg,#ece7d1,#e7e1c6 60%,#e4dec1);padding: clamp(28px, 5.5vw, 64px);box-shadow:10px 10px 0 var(--blk)}
.kicker{display:inline-flex;gap:10px;align-items:center;font:700 12px/1 "IBM Plex Mono",monospace;text-transform:uppercase;background:var(--wht);padding:8px 10px;border:3px dashed var(--blk);box-shadow:6px 6px 0 var(--blk)}
.hero h1{font-family:"Archivo Black",system-ui,sans-serif;font-size:var(--h1);line-height:.9;margin:18px 0 8px}
.hero p{max-width:60ch;font-size:var(--lead);margin:0 0 18px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{ text-decoration:none;padding:12px 14px;border:4px solid var(--blk);background:var(--wht);color:var(--blk);font-weight:800;box-shadow:6px 6px 0 var(--blk)}
.btn.primary{background:var(--blk);color:var(--wht)} .btn.warn{background:var(--m-yellow)}
.section{scroll-margin-top:90px}

/* FILTERS */
.filters{margin:18px 0 6px;border:4px solid var(--blk);background:#fff;padding:12px;box-shadow:6px 6px 0 var(--blk)}
.frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.select, .search{border:3px solid var(--blk);padding:8px 10px;background:#fff;font-weight:700;font-family:"IBM Plex Mono",monospace}
.chip{border:3px solid var(--blk);padding:6px 10px;background:#fff;font:700 12px "IBM Plex Mono",monospace;cursor:pointer;box-shadow:4px 4px 0 var(--blk)}
.chip.on{background:#000;color:#fff}
.clear{margin-left:auto}

/* WALL */
.wall{margin-top:18px;display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 4;background:#fff;border:4px solid var(--blk);box-shadow:8px 8px 0 var(--blk);padding:16px;display:flex;flex-direction:column;gap:10px}
.card .stage{font:700 12px "IBM Plex Mono",monospace;text-transform:uppercase;border-bottom:4px solid var(--blk);padding-bottom:6px}
.card h3{font-family:"Archivo Black",system-ui,sans-serif;font-size:22px;margin:4px 0}
.tag{font:700 11px "IBM Plex Mono",monospace;padding:6px 8px;border:3px solid var(--blk);background:#fff;box-shadow:3px 3px 0 var(--blk)}
.cta-row{display:flex;gap:8px;margin-top:auto}
.pill{padding:10px 12px;border:3px solid var(--blk);font-weight:800;text-decoration:none;box-shadow:4px 4px 0 var(--blk)}
.pill.like{background:var(--m-blue);color:#fff}.pill.pass{background:#fff}.pill.dm{background:#000;color:#fff}

/* SUBMIT FORM */
.form{margin-top:28px;border:4px solid var(--blk);background:#fff;box-shadow:10px 10px 0 var(--blk)}
.form header{padding:14px 16px;border-bottom:4px solid var(--blk);display:flex;justify-content:space-between;align-items:center}
.form header h2{margin:0;font-family:"Archivo Black",system-ui,sans-serif}
.form .body{padding:16px;display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.fgroup{grid-column:span 6;display:flex;flex-direction:column;gap:8px;border:3px dashed var(--blk);padding:12px;background:var(--paper-2)}
.fgroup.full{grid-column:span 12}
.fgroup label{font:700 12px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.fgroup input[type="text"], .fgroup textarea{width:100%;border:3px solid var(--blk);padding:10px;font:600 14px/1.4 Inter,system-ui,sans-serif;background:#fff}
.badge{border:3px solid var(--blk);padding:6px 10px;font:700 12px "IBM Plex Mono",monospace;background:#fff;box-shadow:4px 4px 0 var(--blk);cursor:pointer}
.badge.selected{background:#000;color:#fff}
.range{display:flex;align-items:center;gap:10px} .range input{width:200px}
.small{font:600 12px "IBM Plex Mono",monospace;color:#222}
.drop{border:3px dashed var(--blk);padding:16px;background:#fff;display:flex;align-items:center;justify-content:center;min-height:120px;position:relative}
.drop.drag{background:#fff9d8}
.preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.preview img{width:80px;height:80px;object-fit:cover;border:3px solid var(--blk);box-shadow:4px 4px 0 var(--blk)}
.form .footer{border-top:4px solid var(--blk);padding:12px 16px;display:flex;gap:10px;flex-wrap:wrap;background:var(--paper)}
.btn.save{background:var(--m-blue);color:#fff} .btn.reset{background:#fff}

/* DM MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:1200}
.modal.open{display:flex}
.modal .box{background:#fff;border:4px solid var(--blk);box-shadow:10px 10px 0 var(--blk);max-width:520px;width:92%}
.modal header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:4px solid var(--blk)}
.modal h3{margin:0;font-family:"Archivo Black",system-ui,sans-serif}
.modal .inner{padding:14px}
.modal .inner .row{display:flex;gap:8px;align-items:center;margin:8px 0}
.modal textarea{width:100%;min-height:120px;border:3px solid var(--blk);padding:10px;font:600 14px/1.4 Inter}
.modal .actions{display:flex;gap:8px;padding:12px 14px;border-top:4px solid var(--blk);background:var(--paper)}
.badge.gray{background:#eee;box-shadow:none;border-color:#bbb}

/* ENTRY GATE (prototype notice) */
.gate{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  z-index:10000; /* above all */
  pointer-events:auto;
}
.gate.open{display:flex}
.gate .box{
  width:min(720px, 92vw); background:var(--wht); border:4px solid var(--blk); box-shadow:16px 16px 0 var(--blk);
}
.gate header{padding:14px 16px; border-bottom:4px solid var(--blk); display:flex; align-items:center; gap:10px}
.gate h2{margin:0; font-family:"Archivo Black",system-ui,sans-serif}
.gate .body{padding:16px; font-size:16px}
.gate .body p{margin:0 0 10px; max-width:66ch}
.gate .actions{padding:12px 16px; border-top:4px solid var(--blk); display:flex; gap:10px; flex-wrap:wrap; background:var(--paper)}
.gate .btn{cursor:pointer}
.gate .tiny{font:600 12px "IBM Plex Mono",monospace}
.gate a{color:inherit}

/* RESPONSIVE */
@media (max-width:1100px){:root{ --rail-left:150px; --rail-right:150px }}
@media (max-width:960px){.card{grid-column:span 6}.fgroup{grid-column:span 12}}
@media (max-width:720px){.sidenav,.railnav{display:none}.page{width:auto;margin:16px;max-width:none}.card{grid-column:span 12}}