:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#444;
  --line:#cfcfcf;
  --panel:#f7f7f7;
  --panel2:#f2f2f2;
  --accent:#1a5cff;
  --brand:#b00020;
  --shadow: 0 6px 14px rgba(0,0,0,.08);
  --r10:10px;
  --max: 980px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

/* Center the entire page */
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px;
}

a{color: var(--accent); text-decoration: underline}
a:hover{opacity:.9}

.topbar{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.topbar__inner{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;
  font-size: 13px;
}
.topdot{
  width:9px;height:9px;border-radius:50%;
  background: var(--brand);
}
.topbar__text{color: var(--muted)}
.topbar__link{margin-left:auto}

/* Header (brand left, nav right) */
.header{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 0;
}

.brand{display:flex;align-items:center}
.brand__logo{height:32px;width:auto;display:block}

/* Nav on the right */
.nav{
  display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav__item{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;
  border:1px solid var(--line);
  background:#fff;
  color:#111;
  font-size: 13px;
  text-decoration:none;
}
.nav__item img{width:16px;height:16px}
.nav__item:hover{background: var(--panel)}
.nav__item.active{
  border-color:#888;
  background: var(--panel2);
  font-weight: bold;
}
.nav__item.donate{border-color:#d7b24a}
.nav__item.more{opacity:.95}

/* Subhead */
.subhead{
  border-top:1px solid var(--line);
  background: #fff;
}
.subhead__inner{
  display:flex;align-items:center;gap:12px;
  padding: 10px 0;
}
.subhead__upload{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;
  border:1px solid var(--line);
  background:#fff;
  color:#111;
  text-decoration:none;
  font-size:13px;
}
.subhead__upload img{width:16px;height:16px}
.subhead__upload:hover{background: var(--panel)}

.subsearch{
  flex:1;
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;
  border:1px solid var(--line);
  background:#fff;
}
.subsearch img{width:16px;height:16px}
.subsearch input{
  width:100%;
  border:0;
  outline:0;
  font-size: 13px;
}

/* Hero */
.main{padding-bottom: 18px}
.hero{padding: 18px 0 8px}
.hero__title{
  margin:0 0 6px;
  font-size: 22px;
  font-weight: bold;
}
.hl{color: #000}
.hero__sub{margin:0;color: var(--muted);font-size: 14px}

/* Panel */
.content{padding: 10px 0}
.panel{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius: var(--r10);
  box-shadow: var(--shadow);
  padding: 14px;
}
.panel__badge{
  display:inline-block;
  font-size: 12px;
  padding:3px 8px;
  border:1px solid var(--line);
  background:#fff;
  margin-bottom: 8px;
}
.panel__title{margin:0 0 4px;font-size: 16px}
.panel__desc{margin:0 0 10px;color: var(--muted);font-size: 13px}

.bigsearch__row{
  display:flex;align-items:center;gap:8px;
  padding:8px;
  border:1px solid var(--line);
  background:#fff;
}
.bigsearch__row img{width:16px;height:16px}
.bigsearch__row input{
  flex:1;
  border:0;
  outline:0;
  font-size: 13px;
}
.btn{
  border:1px solid var(--line);
  background: #eee;
  padding:6px 10px;
  cursor:pointer;
  font-size: 13px;
}
.btn:hover{background:#e5e5e5}

.bigsearch__meta{
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.bigsearch__meta span{margin: 0 6px;color:#777}

/* Two columns inside panel */
.cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.col h3{margin:0 0 6px;font-size: 13px}
.col ul{margin:0;padding-left:18px}
.col li{margin: 4px 0}
.col a{color: var(--accent)}

/* Article section (older technology style) */
.article-section{
  margin-top: 16px;
  padding: 12px 0;
}
.article{
  border: 1px solid var(--line);
  background: #fff;
  padding: 14px;
}

.article h1{
  font-size: 22px;
  margin: 0 0 10px;
}
.article h2{
  font-size: 16px;
  margin: 14px 0 6px;
}
.article h3{
  font-size: 14px;
  margin: 10px 0 6px;
}
.article p, .article li{
  font-size: 14px;
}
.article table{
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
}
.article th, .article td{
  border: 1px solid var(--line);
  padding: 8px;
  vertical-align: top;
}
.article th{
  background: #f0f0f0;
}
.article-note{
  margin-top: 10px;
  color: var(--muted);
}

/* Footer */
.foot{padding: 14px 0 0}
.foot__inner{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  border-top:1px solid var(--line);
  padding-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.foot__links{display:flex;gap:10px}

/* Responsive */
@media (max-width: 720px){
  .cols{grid-template-columns: 1fr}
  .subhead__inner{flex-direction:column;align-items:stretch}
  .nav{justify-content:flex-start}
  .foot__inner{flex-direction:column}
}