/* Iron Ball live site. Plain CSS, no JavaScript, no external requests.
   Hard edges only: no gradients, no rounded corners, no blur. Colours are the
   project's own palette (noir, gunmetal, pearl, gold). */

:root {
  --noir0: #06070a;
  --noir2: #0b0c10;
  --noir3: #181a20;
  --gunmetal4: #4d4e55;
  --gunmetal5: #61626a;
  --pearl0: #a8a89e;
  --pearl6: #f0f0e8;
  --gold4: #d4af37;
  --garnet6: #b14848;
  --pixel: "Silkscreen", "Press Start 2P", "Pixelify Sans", "VT323", ui-monospace,
    "Cascadia Mono", "Courier New", monospace;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--noir0);
}

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--noir0);
  color: var(--pearl6);
  font-family: var(--pixel);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.frame {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header. */

.head {
  padding: 2rem 0 1.5rem;
  border-bottom: 2px solid var(--gunmetal4);
}

.logo {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  image-rendering: pixelated;
}

.tag {
  margin: 1rem 0 0;
  color: var(--pearl0);
  max-width: 34rem;
}

/* Hero art. */

.hero {
  margin: 1.5rem 0 0;
  border: 2px solid var(--gunmetal4);
  background: var(--noir2);
}

.art {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

/* Panels of text. */

.panel {
  margin: 2rem 0 0;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 2px solid var(--gunmetal4);
  background: var(--noir2);
}

.panel h2 {
  margin: 0 0 1rem;
  color: var(--gold4);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel p {
  margin: 0 0 1rem;
}

.panel p:last-child {
  margin-bottom: 0;
}

.host {
  color: var(--gold4);
  word-break: break-word;
}

/* The list of what a week needs. */

.facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts li {
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-top: 1px solid var(--gunmetal4);
}

.facts li:first-child {
  border-top: 0;
}

.facts b {
  color: var(--gold4);
}

/* The short specification list. */

.spec {
  margin: 0;
}

.spec dt {
  color: var(--gold4);
  margin-top: 0.9rem;
}

.spec dt:first-child {
  margin-top: 0;
}

.spec dd {
  margin: 0.2rem 0 0;
  color: var(--pearl0);
}

/* Footer. */

.foot {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--gunmetal4);
  color: var(--gunmetal5);
  font-size: 0.85rem;
}

/* Narrow screens. */

@media (max-width: 30rem) {
  body {
    font-size: 15px;
  }

  .head {
    padding-top: 1.25rem;
  }

  .panel {
    padding: 1rem;
  }
}