:root {
  color-scheme: dark;
  --p31: #00ff31;
  --p31-soft: #c2ffb8;
  --cyan: #47f5ff;
  --amber: #ff9b28;
  --paper: #ffffcf;
  --deep: #001f00;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  background: var(--deep) url("/Pics/ScanBG1.jpg") repeat;
  color: var(--p31);
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.38;
}

a { color: var(--cyan); }
a:visited { color: #87bfff; }
a:hover, a:focus-visible { color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

img, iframe { max-width: 100%; }
img { height: auto; }

.skip-link {
  position: fixed;
  z-index: 5;
  top: 0;
  left: .75rem;
  padding: .5rem .75rem;
  background: var(--paper);
  color: #000;
  transform: translateY(-120%);
}
.skip-link:focus { transform: translateY(0); }

.masthead {
  width: min(94vw, 800px);
  margin: 1.6rem auto 0;
  text-align: center;
}

.masthead img {
  display: block;
  width: min(100%, 700px);
  margin: 0 auto .25rem;
  filter: contrast(1.07) saturate(.94);
}

.masthead p { margin: .35rem 0 1rem; }

.wire-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .15rem .9rem;
  margin: 0 auto 1.5rem;
  font-size: .9rem;
}

.wire-nav a { white-space: nowrap; }

main {
  width: min(94vw, 760px);
  margin: 0 auto 3rem;
}

.welcome {
  width: min(100%, 610px);
  margin: 0 auto;
  color: var(--p31-soft);
  font-size: 1.12rem;
}

.welcome strong { color: var(--p31); }

.rule {
  height: 1px;
  margin: 1.75rem auto;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--p31), transparent);
}

.news {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: start;
  gap: 1.25rem;
  width: min(100%, 660px);
  margin: auto;
}

h1, h2, h3 { margin: 0; font-weight: bold; line-height: 1.08; }
h1 { color: var(--paper); font-size: clamp(1.75rem, 5vw, 2.6rem); }
h2 { color: var(--paper); font-size: 1.55rem; }
h3 { color: var(--amber); font-size: 1.05rem; }

.news p { margin: .65rem 0 0; color: var(--paper); }
.news figure { margin: 0; text-align: center; }
.news figure img { width: 180px; border: 1px solid #60a75d; }
.news figcaption { margin-top: .3rem; color: #8dc88b; font-size: .73rem; line-height: 1.1; }

.watch { text-align: center; }
.watch h2 { margin-bottom: .4rem; }
.watch p { margin: .4rem auto 1rem; color: var(--p31-soft); }
.watch iframe {
  display: block;
  width: min(100%, 640px);
  aspect-ratio: 16 / 9;
  margin: auto;
  border: 1px solid #4f9a50;
}

.lessons {
  width: min(100%, 620px);
  margin: auto;
  color: var(--p31-soft);
}
.lessons p { margin: .45rem 0; }

.shelf { width: min(100%, 700px); margin: auto; }
.shelf-item {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
  margin: 1.4rem 0;
  color: var(--paper);
}
.shelf-item img { display: block; max-height: 155px; margin: auto; }
.shelf-item p { margin: .35rem 0 0; }

.archive {
  width: min(100%, 700px);
  margin: auto;
  color: var(--paper);
}
.archive table { width: 100%; border-collapse: collapse; }
.archive td { padding: .75rem .45rem; border-top: 1px dotted #29822d; vertical-align: middle; }
.archive td:first-child { width: 112px; text-align: center; }
.archive img { display: block; max-width: 100px; margin: auto; }

.footer {
  width: min(94vw, 700px);
  margin: 2.5rem auto 1.5rem;
  color: var(--p31-soft);
  font-size: .9rem;
  text-align: center;
}
.footer p { margin: .7rem 0; }
.footer small { color: #8dc88b; }

@media (max-width: 580px) {
  body { font-size: 16px; }
  .masthead { margin-top: .75rem; }
  .news, .shelf-item { grid-template-columns: 1fr; }
  .news figure { grid-row: 1; }
  .news figure img { width: 140px; }
  .shelf-item { text-align: center; }
  .shelf-item img { max-height: 125px; }
  .archive td:first-child { width: 92px; }
  .archive img { max-width: 80px; }
}