/* /css/style.css */

/* Retro portal vibe (table layout, boxed panels, beveled borders) */
html, body { height: 100%; }

body{
  margin:0;
  padding:18px 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#e8dfc7;
  background:#1b1209;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.05), rgba(0,0,0,0) 35%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.04), rgba(0,0,0,0) 40%),
    linear-gradient(#1b1209, #120b05);
}

a{ color:#f1d48a; text-decoration:none; }
a:hover{ text-decoration:underline; color:#ffe1a6; }

.page{ width:760px; margin:0 auto; }

.frame{
  width:100%;
  border:1px solid #5a3b1e;
  background:#2a1b0e;
}

.frame-top{ border-bottom:1px solid #5a3b1e; }

.banner{
  background:#201408;
  border-bottom:1px solid #7a522a;
}

.banner-inner{
  padding:10px 12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.site-mark .site-name{
  font-weight:bold;
  font-size:22px;
  letter-spacing:1px;
  color:#ffe3a8;
  text-shadow:1px 1px 0 #000;
}

.site-mark .site-tagline{
  font-size:11px;
  color:#cbb58b;
}

.banner-links{
  font-size:11px;
  color:#cbb58b;
}

.nav{
  width:190px;
  border-right:1px solid #5a3b1e;
  background:#24160b;
  padding:10px;
}

.nav-box{
  border:1px solid #6a4524;
  background:#1f1309;
  margin-bottom:10px;
}

.nav-title{
  padding:6px 8px;
  font-weight:bold;
  font-size:11px;
  background:#2c1b0d;
  border-bottom:1px solid #6a4524;
  color:#ffe3a8;
}

.nav-links, .nav-text{
  padding:8px;
  line-height:1.6;
  color:#d7c7a8;
}

.content{
  padding:10px 12px;
  background:#2a1b0e;
}

.panel{
  border:1px solid #6a4524;
  background:#1f1309;
  margin-bottom:12px;
}

.panel-title{
  padding:7px 10px;
  font-weight:bold;
  font-size:12px;
  background:#2c1b0d;
  border-bottom:1px solid #6a4524;
  color:#ffe3a8;
}

.panel-body{ padding:10px; }

.news-item{
  border:1px solid #3b2613;
  background:#24160b;
  margin-bottom:10px;
  padding:8px;
}

.news-title{
  font-weight:bold;
  color:#ffe3a8;
  margin-bottom:3px;
}

.news-date{
  font-size:10px;
  color:#bda985;
  margin-bottom:6px;
}

.news-text{ color:#e8dfc7; line-height:1.5; }

.status{
  width:100%;
  border:1px solid #3b2613;
  background:#24160b;
  margin-top:10px;
}

.status-head{
  font-weight:bold;
  font-size:11px;
  color:#ffe3a8;
  background:#2c1b0d;
  padding:6px 8px;
  border-bottom:1px solid #3b2613;
}

.status-cell{
  padding:7px 8px;
  border-top:1px solid #3b2613;
  color:#e8dfc7;
}

.badge{
  display:inline-block;
  padding:2px 6px;
  border:1px solid #6a4524;
  background:#1f1309;
  font-size:10px;
  color:#e8dfc7;
  text-transform:uppercase;
  letter-spacing:0.4px;
}

.badge-wip{ border-color:#8a4a2a; }
.badge-soon{ border-color:#6a7a2a; }

.two-col{ display:flex; gap:10px; }
.col{
  width:50%;
  border:1px solid #3b2613;
  background:#24160b;
  padding:8px;
}

.subhead{
  font-weight:bold;
  color:#ffe3a8;
  margin-bottom:6px;
}

.text{ color:#e8dfc7; line-height:1.5; }
.spacer{ height:8px; }

.callout{
  border:1px solid #3b2613;
  background:#24160b;
  padding:10px;
}

.callout-title{
  font-weight:bold;
  color:#ffe3a8;
  margin-bottom:6px;
}

.callout-text{ color:#e8dfc7; line-height:1.5; }

.list{ margin:0; padding-left:18px; }
.list li{ margin:4px 0; }

.callout-actions{ margin-top:10px; }

.btn{
  display:inline-block;
  padding:5px 10px;
  margin-right:6px;
  border:1px solid #6a4524;
  background:#2c1b0d;
  color:#ffe3a8;
  font-size:11px;
  text-decoration:none;
}

.btn:hover{
  background:#352110;
  text-decoration:none;
}

.status-pill{
  display:inline-block;
  padding:1px 6px;
  border:1px solid #6a4524;
  background:#1f1309;
  font-size:10px;
}

.status-offline{ border-color:#8a4a2a; }
.status-online{ border-color:#6a7a2a; }

.muted{ color:#bda985; font-size:10px; }

.footer{
  border-top:1px solid #5a3b1e;
  background:#201408;
}

.footer-inner{
  padding:10px 12px;
  text-align:center;
}

.fineprint{
  font-size:10px;
  color:#bda985;
  line-height:1.4;
}

@media (max-width: 820px){
  .page{ width:95%; }
  .two-col{ display:block; }
  .col{ width:auto; margin-bottom:10px; }
}
/* Add to /css/style.css (or replace the matching blocks) */

.site-mark{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-link{
  display:inline-block;
  line-height:0;
}

.site-logo{
  display:block;
  height:54px;
  width:auto;
  max-width:180px;
}

.site-mark-text{
  display:block;
}

@media (max-width: 820px){
  .site-logo{
    height:44px;
    max-width:150px;
  }
}