/* BRICK Protocol - combined site shell (obsidian + gold identity) */
:root{
  --obsidian:#0A0D12; --panel:#0E131A; --gold:#E3A93E; --gold-hi:#F6DC9A;
  --gold-lo:#B9822B; --parch:#ECE5D6; --ash:#7e8794; --line:rgba(227,169,62,.16);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  background:var(--obsidian);
  font-family:'Courier New',ui-monospace,monospace;
  overflow:hidden;
}

/* top master nav */
.shnav{
  height:52px; display:flex; align-items:center; gap:26px; padding:0 22px;
  background:linear-gradient(180deg,rgba(10,13,18,.97),rgba(10,13,18,.86));
  border-bottom:1px solid var(--line); position:relative; z-index:5;
}
.shnav .brand{ font-family:'Arial Black',Arial,sans-serif; font-weight:900; letter-spacing:-1px; font-size:19px; }
.shnav .brand b{
  background:linear-gradient(94deg,var(--gold-lo),var(--gold-hi) 45%,var(--gold-lo));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.shnav .brand span{ color:var(--ash); font-size:10px; letter-spacing:.26em; margin-left:9px; text-transform:uppercase; }
.shnav .links{ display:flex; gap:8px; margin-left:auto; }
.shnav a{
  color:var(--parch); opacity:.72; text-decoration:none; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; padding:9px 15px;
  border-radius:4px; border:1px solid transparent; transition:.15s;
}
.shnav a:hover{ opacity:1; border-color:var(--line); }
.shnav a.active{ opacity:1; color:var(--gold); border-color:var(--line); background:rgba(227,169,62,.07); }

/* page viewport */
#frames{ position:absolute; top:52px; left:0; right:0; bottom:0; }
iframe.page{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:none; background:var(--obsidian);
}
iframe.page.on{ display:block; }

@media(max-width:560px){
  .shnav{ gap:12px; padding:0 14px; }
  .shnav a{ padding:8px 10px; font-size:11px; }
  .shnav .brand span{ display:none; }
}