* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background:url('../images/diagonal-pin-stripes-gray.png') repeat scroll center top #d0d0d0;
  color:#111;
  font-family:Georgia, serif;
}
.site {
  width:1010px;
  margin:20px auto 0;
  min-height:100vh;
  padding-top:20px;
  background:#c8c8c8;
  border:2px solid #000;
  border-radius:12px;
  box-shadow:0 0 14px rgba(0,0,0,.22);
}

.header {
  width:940px;
  height:150px;
  margin:0 35px 0;
  position:relative;
  overflow:hidden;
  background:#d8d8d8;
}
.header-slide {
  position:absolute;
  inset:0;
  width:940px;
  height:150px;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.8s ease;
}
.header-slide.active { opacity:1; }
.site-title {
  position:absolute;
  z-index:10;
  left:0; right:0; top:34px;
  margin:0;
  text-align:center;
  font-size:48px;
  line-height:58px;
  font-weight:bold;
  color:#ff0000;
  text-shadow:2px 2px 4px rgba(255,255,255,.85);
}
.mini-nav {
  text-align:center;
  padding:11px 0 6px;
  font-family:Arial,sans-serif;
  font-weight:bold;
  font-size:13px;
}
.mini-nav a {
  display:inline-block;
  margin:0 7px;
  padding:7px 15px;
  color:#000;
  text-decoration:none;
  background:#f3f3f3;
  border:1px solid #999;
  border-radius:5px;
}
.mini-nav a:hover { background:#ddd; }
.content {
  width:860px;
  margin:22px auto 35px;
  padding:28px 32px 35px;
  background:#ffffff;
  border:1px solid #aaa;
  border-radius:9px;
  box-shadow:3px 3px 7px rgba(0,0,0,.15);
}
h1 {
  margin:0 0 12px;
  text-align:center;
  color:#cc0000;
  font-size:34px;
  line-height:42px;
}
h2 {
  margin:27px 0 10px;
  font-size:23px;
  line-height:30px;
}
p {
  margin:0 0 17px;
  font-size:17px;
  line-height:27px;
  text-align:justify;
}
.standfirst {
  text-align:center;
  font-style:italic;
  font-size:18px;
}
.answer-box, .app-box, .article-card {
  background:#f4f4f4;
  border:1px solid #aaa;
  border-radius:9px;
  box-shadow:3px 3px 7px rgba(0,0,0,.15);
}
.answer-box {
  margin:24px 0;
  padding:18px 22px;
}
.answer-box p { margin:0; text-align:left; font-weight:bold; }
.photo-row {
  display:flex;
  gap:22px;
  margin:22px 0 26px;
  align-items:stretch;
}
.photo {
  flex:1;
  border:1px solid #999;
  border-radius:8px;
  overflow:hidden;
  background:#eee;
  min-height:210px;
}
.photo img {
  width:92%;
  height:200px;
  object-fit:contain;
  display:block;
  margin:5px auto 0;
}

.photo img.rod-one {
  transform:translateX(12px);
}

.photo img.rod-two {
  transform:translateX(8px);
}
.photo-caption {
  padding:7px 10px 9px;
  font-family:Arial,sans-serif;
  font-size:12px;
  line-height:17px;
  text-align:center;
}
.guide {
  width:100%;
  border-collapse:collapse;
  margin:20px 0 25px;
  font-family:Arial,sans-serif;
  font-size:15px;
}
.guide th,.guide td {
  border:1px solid #aaa;
  padding:11px 13px;
  text-align:left;
  vertical-align:top;
}
.guide th { background:#eee; }
.app-box {
  margin:32px 0 0;
  padding:20px 25px;
  text-align:center;
}
.app-box p { text-align:center; font-weight:bold; margin-bottom:15px; }
.button {
  display:inline-block;
  padding:9px 22px;
  background:#cc0000;
  color:white;
  text-decoration:none;
  font-weight:bold;
  border-radius:5px;
  box-shadow:2px 2px 4px rgba(0,0,0,.3);
}
.help-intro {
  width:760px;
  margin:0 auto 25px;
  text-align:center;
}
.help-intro p { text-align:center; }
.article-card {
  padding:22px 25px;
  margin:18px 0;
}
.article-card h2 { margin:0 0 8px; color:#cc0000; }
.article-card p { margin-bottom:14px; }
.article-card a { color:#cc0000; font-weight:bold; }
.coming {
  opacity:.68;
}
.footer {
  border-top:1px solid #ccc;
  width:860px;
  margin:0 auto;
  padding:16px 0 25px;
  text-align:center;
  font-family:Arial,sans-serif;
  font-size:12px;
  color:#555;
}
