:root{
  --red:#E10600; --black:#0A0A0A; --paper:#ffffff; --ink:#141414;
  --muted:#6b6b6b; --rule:#e6e6e6; --shade:#faf8f8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.5}
.disp{font-family:'Bebas Neue','Oswald',sans-serif}

/* ---- hero ---- */
.hero{background:var(--black);color:#fff;text-align:center;padding:104px 24px 88px}
.eyebrow{font-family:'Bebas Neue',sans-serif;color:var(--red);letter-spacing:.34em;font-size:15px;padding-left:.34em}
.hero h1{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(60px,13vw,124px);line-height:.86;letter-spacing:.01em;margin:14px 0 0}
.hrule{width:64px;height:3px;background:var(--red);margin:20px auto 18px}
.hero-sub{font-family:'Bebas Neue',sans-serif;letter-spacing:.16em;font-size:clamp(18px,3vw,24px);color:#fff}
.hero-note{color:#9a9a9a;font-size:13.5px;margin-top:14px;font-style:italic}

/* ---- masthead ---- */
.masthead{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1.5px solid var(--ink);padding:12px 24px 8px}
.mast-inner{max-width:900px;margin:0 auto;display:flex;justify-content:space-between;align-items:baseline}
.mast-brand{font-family:'Bebas Neue',sans-serif;letter-spacing:.22em;font-size:19px;color:var(--ink)}
.mast-tag{font-family:'Bebas Neue',sans-serif;letter-spacing:.14em;font-size:13px;color:var(--red)}
.mast-sub{max-width:900px;margin:3px auto 0;font-size:9.5px;letter-spacing:.16em;color:var(--muted)}

/* ---- content ---- */
.wrap{max-width:900px;margin:0 auto;padding:34px 24px 60px}
.search{width:100%;padding:13px 16px;border:1.5px solid var(--rule);border-radius:8px;font-size:15px;font-family:inherit;margin-bottom:26px}
.search:focus{outline:none;border-color:var(--ink)}
.tier{font-family:'Bebas Neue',sans-serif;color:var(--red);letter-spacing:.07em;font-size:21px;margin:26px 0 4px;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 4px;border-bottom:1px solid var(--rule)}
.row:hover{background:var(--shade)}
.role .name{font-weight:700;font-size:16px;letter-spacing:.01em}
.role .meta{color:var(--muted);font-size:12.5px;margin-top:2px}
.role .meta b{color:var(--ink);font-weight:600}
.actions{display:flex;gap:8px;flex:0 0 auto}
.btn{font-size:12px;font-weight:600;letter-spacing:.02em;text-decoration:none;padding:7px 13px;border-radius:6px;white-space:nowrap;transition:.12s}
.btn.view{background:var(--red);color:#fff}
.btn.view:hover{filter:brightness(1.08)}
.btn.dl{border:1.4px solid var(--rule);color:var(--ink)}
.btn.dl:hover{border-color:var(--ink)}
.empty{color:var(--muted);text-align:center;padding:40px 0;font-style:italic}
footer{max-width:900px;margin:0 auto;padding:22px 24px 40px;border-top:1px solid var(--rule);color:var(--muted);font-size:11.5px}

@media(max-width:620px){
  .row{flex-direction:column;align-items:flex-start;gap:10px}
  .actions{width:100%}
  .btn{flex:1;text-align:center}
}



/* ---- access gate (INTERDEPENDENT Central Casting pattern — paste-verbatim brand gate) ---- */
#gate{--bg:#0a0a0a;--panel:#141414;--line:#2a2a2a;--ink:#f4f4f4;--mut:#7f7f7f;--red:#FF0000;
  --font:'Eurostile Next Pro','Eurostile Next','Helvetica Neue',system-ui,Arial,sans-serif;
  position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg);z-index:1000;padding:18px;color:var(--ink);font-family:var(--font)}
#gate *{font-family:var(--font);box-sizing:border-box}
#gate .box{width:min(92vw,380px);text-align:center}
#gate .eyebrow{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--mut)}
#gate .red{color:var(--red)}
#gate .rule{height:4px;width:44px;background:var(--red);border:0;margin:16px auto}
#code{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:26px;
  letter-spacing:.5em;text-align:center;padding:16px;border-radius:8px;outline:none;font-family:var(--font)}
#code:focus{border-color:var(--red)}
#gate .go{width:100%;margin-top:12px;background:var(--red);color:#fff;border:0;padding:14px;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;border-radius:8px;font-weight:700;cursor:pointer;font-family:var(--font)}
#gateErr{color:var(--red);font-size:12px;height:16px;margin-top:10px}