/* ============================================================
   CHISQUAD.COM  —  Combat Hardened Individuals
   2003 look, rebuilt from the Wayback Machine archive.
   ============================================================ */

:root{
  --black:#000000;
  --olive:#898861;
  --olive-dk:#6f6e4d;
  --olive-lt:#a3a279;
  --grey:#5e5e5d;
  --grey-dk:#4a4a49;
  --divider:#5a5a59;
  --tan:#75684b;
  --gold:#af8b32;
  --gold-lt:#d8b24a;
  --date:#cc4419;
  --link:#2b2b1a;
  --ink:#111108;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0;background:var(--black);}
body{
  font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
  font-size:12px;
  color:#d8d8d0;
  -webkit-text-size-adjust:100%;
}

img{border:0;max-width:100%;height:auto;display:block}
a{color:var(--gold-lt);}
a:hover{color:#ffd76a;}

/* ---------- shell ---------- */
.shell{max-width:1180px;margin:0 auto;background:var(--black);}

/* ---------- header ---------- */
.header{
  position:relative;
  background:var(--black);
  min-height:132px;
  padding:8px 16px 0 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.header .brand img{width:184px;height:auto;margin-top:-4px}
.header .brand{flex:0 0 auto}
.header .topright{
  flex:1 1 auto;
  text-align:right;
  padding-top:78px;
  font-size:12px;
}
.header .topright a{
  color:#4e6cf0;
  text-decoration:underline;
}
.header .topright a:hover{color:#8ea3ff}
.header .topright .globe{
  display:inline-block;width:12px;height:12px;margin-right:4px;
  background:#4e6cf0;border-radius:50%;vertical-align:-1px;
}

.divider{height:11px;background:var(--divider);}

/* ---------- body layout ---------- */
.layout{display:flex;align-items:stretch;min-height:560px}

/* ---------- sidebar ---------- */
.sidebar{
  flex:0 0 196px;
  width:196px;
  background:var(--olive);
  padding:12px 0 0 0;
  display:flex;
  flex-direction:column;
}
.sidebar h2{
  font-family:Arial,Helvetica,sans-serif;
  font-size:21px;
  line-height:1;
  font-weight:700;
  color:var(--ink);
  margin:6px 0 8px 14px;
  letter-spacing:.5px;
}
.sidebar nav{margin:0 0 14px 0}
.sidebar nav a{
  display:block;
  padding:3px 10px 3px 14px;
  color:var(--ink);
  font-weight:700;
  font-size:12px;
  text-decoration:none;
  line-height:1.5;
}
.sidebar nav a:hover{color:#fff;background:var(--olive-dk)}
.sidebar nav a.on{color:#fff;background:var(--olive-dk)}
.sidebar .soldier{border-color:#3d3d34}
.sidebar .spacer{flex:1 1 auto;min-height:10px}
.sidebar .soldier{
  margin:8px 6px 0 6px;
  border:2px solid #4a4a4a;
  background:#000;
  padding:0;
  line-height:0;
}
.sidebar .soldier img{width:100%;height:auto}

/* ---------- content ---------- */
.content{
  flex:1 1 auto;
  background:var(--black);
  padding:10px 14px 26px 14px;
  min-width:0;
}
.titlebar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:0 0 0 0;
}
.pagetab{
  display:inline-block;
  background:var(--olive);
  color:var(--ink);
  font-weight:700;
  font-size:13px;
  padding:7px 16px;
  border-radius:7px 7px 0 0;
  white-space:nowrap;
}
.pagedate{
  color:var(--date);
  font-weight:700;
  font-size:15px;
  padding-bottom:4px;
  white-space:nowrap;
}

.panel{
  border:7px solid var(--gold);
  border-radius:0 22px 22px 0;
  background:var(--grey);
  padding:0;
  overflow:hidden;
}
.panel .inner{padding:18px 22px;color:#f0efe6}
.panel.plain{background:var(--grey)}

/* hero (home page) */
.hero{
  background:var(--grey);
  display:flex;justify-content:center;align-items:center;
  padding:0;
}
.hero .band{
  background:var(--tan);
  padding:22px 34px;
  display:flex;justify-content:center;align-items:center;
  width:100%;max-width:560px;min-height:470px;
}
.hero img{width:100%;max-width:420px}

/* typography inside panels */
.inner h1,.inner h2,.inner h3{
  font-family:Arial,Helvetica,sans-serif;
  color:#fff8e0;margin:0 0 10px;
}
.inner h1{font-size:20px}
.inner h2{font-size:16px;margin-top:22px;border-bottom:1px solid #7d7c72;padding-bottom:4px}
.inner h3{font-size:13px;margin-top:16px}
.inner p{line-height:1.65;margin:0 0 13px;color:#f2f1e8}
.inner a{color:#ffe08a}
.inner ul{line-height:1.7}

.lead{color:#fff3cf;font-weight:700}

/* tables */
table.grid{border-collapse:collapse;width:100%;margin:6px 0 16px;font-size:12px}
table.grid th{
  background:var(--olive-dk);color:#fff;text-align:left;
  padding:6px 8px;font-size:11px;letter-spacing:.4px;text-transform:uppercase;
}
table.grid td{padding:5px 8px;border-bottom:1px solid #6e6d6c;color:#f2f1e8;vertical-align:top}
table.grid tr:nth-child(even) td{background:#666665}

/* roster / member lists */
.az{margin:0 0 14px;display:flex;flex-wrap:wrap;gap:4px}
.az a{
  display:inline-block;min-width:22px;text-align:center;
  padding:3px 6px;background:var(--olive);color:var(--ink);
  font-weight:700;text-decoration:none;border-radius:3px;font-size:11px;
}
.az a:hover,.az a.on{background:var(--gold);color:#1b1200}

.memberlist{columns:3;column-gap:26px;margin:0;padding:0;list-style:none}
.memberlist li{break-inside:avoid;padding:2px 0}
.memberlist a{color:#ffe08a;text-decoration:none}
.memberlist a:hover{text-decoration:underline}

/* guestbook */
.gb{margin:0 0 18px;background:#565655;border:1px solid #7a7a78;border-radius:4px;overflow:hidden}
.gb .gbhead{background:var(--olive-dk);color:#fff;padding:6px 10px;font-weight:700;font-size:11px;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.gb .gbmeta{padding:8px 12px 0;font-size:11px;color:#e9e8de}
.gb .gbmeta b{color:#fff3cf}
.gb .gbbody{padding:8px 12px 12px;line-height:1.6;white-space:pre-wrap;color:#f4f3ea}

/* notes / provenance */
.note{
  margin:14px 0 0;padding:10px 12px;background:#4f4f4e;border-left:4px solid var(--gold);
  font-size:11px;color:#e6e5db;line-height:1.6;
}
.note a{color:#ffe08a}

/* footer */
.footer{
  background:#000;color:#8b8a7c;font-size:11px;
  padding:14px 16px 26px;text-align:center;line-height:1.7;
}
.footer a{color:#af8b32}

/* archive index */
.urllist{font-family:"DejaVu Sans Mono",Consolas,monospace;font-size:11px;line-height:1.75}
.urllist a{color:#ffe08a;text-decoration:none}
.urllist a:hover{text-decoration:underline}

/* responsive */
@media (max-width:820px){
  .layout{display:block}
  .sidebar{width:100%;flex:none}
  .sidebar nav{display:flex;flex-wrap:wrap}
  .sidebar nav a{padding:6px 10px}
  .sidebar .soldier{max-width:200px}
  .memberlist{columns:2}
  .header{min-height:0;flex-direction:column;align-items:flex-start}
  .header .topright{text-align:left;padding-top:6px}
  .panel{border-radius:0}
}
@media (max-width:520px){
  .memberlist{columns:1}
  .header .brand img{width:132px}
}

/* additions */
.dim{color:#c9c8bb}
.nowrap{white-space:nowrap}
.quote{font-size:14px;color:#fff3cf;border-left:3px solid var(--gold);padding-left:12px}
.ribbon{margin:0 0 14px;padding:10px 14px;background:#565655;border-left:4px solid var(--gold);border-radius:0 4px 4px 0}
.ribbon h3{margin:0 0 6px;color:#ffe9a8;font-size:14px}
.ribbon p{margin:0;font-size:12px;line-height:1.6}
.urllist div{padding:1px 0}
.ribbonlist{columns:2;column-gap:26px;margin:0 0 10px;padding:0;list-style:none;font-size:12px}
.ribbonlist li{break-inside:avoid;padding:2px 0}
.ribbonlist a{color:#ffe08a;text-decoration:none}
.ribbonlist a:hover{text-decoration:underline}
.ribbon:target{background:#6a6a52;border-left-color:#ffd76a}

/* original chisquad graphics */
.rankbadge{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.rankbadge span{color:#fff3cf;font-weight:700;font-size:13px}
.rankimg{max-height:46px;width:auto;display:block}
.rankimg.sm{max-height:30px;width:auto}
.ribimg{max-height:22px;width:auto;display:block}
.ribimg.big{max-height:26px;width:auto;float:left;margin:2px 12px 6px 0}
.ribstrip{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 14px;padding:8px;background:#4f4f4e;border-radius:4px}
.ribstrip a{display:block;line-height:0}
.ribbon{overflow:hidden}
.img-missing{}

/* allies */
.allygrid{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0}
.allycard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;
  background:#565655;border:1px solid #7a7a78;border-radius:5px;text-decoration:none;
  width:180px;color:#ffe08a}
.allycard:hover{background:#6a6a52;border-color:var(--gold)}
.allycard img{max-width:158px;max-height:70px;width:auto;height:auto;background:#000}
.allycard span{font-weight:700;font-size:12px;text-align:center}
.allyhead{margin:0 0 10px}
.allybanner{max-width:100%;height:auto;background:#000;border:1px solid #4a4a4a}