/* Torture — main.css
   Tokens: design-system/MASTER.md. Site rules: design-system/pages/site.md.
   Browser defaults wherever they hold. One face, one weight, one theme.
   Source view: the structural tags are drawn, dim, around the real elements,
   so the page reads as its own markup (after ofthemountain.com). */

@font-face {
  font-family: "IBM 3270";
  src: url("../fonts/ibm-3270.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ox: #4A0404;
  --green: #5EFD5E;
  --dim: #B8B8B8;
}

html {
  --lw: min(140vw, 1100px);
  --lh: calc(var(--lw) * 1199 / 1600);
  --lt: 12vh;
  background: #FFFFFF;
  color: #000000;
  font: 16px/1.5 "IBM 3270", ui-monospace, Menlo, Consolas, monospace;
  position: relative;
  overflow-x: hidden;
  /* Short pages still run past the logo, so the mark is never cropped
     and the three lines have somewhere to go. */
  min-height: max(100vh, calc(var(--lt) + var(--lh) + 96px));
}

/* The band logo floats behind the first screen and scrolls away with it.
   One line runs up from the cross at its top edge to the top of the page;
   three run down from its three lowest tips to the end of the page.
   Weights are measured on the 1600x1199 asset just inside each edge, where
   the stroke has not yet tapered: top 6px, left 4px, center 4px, right 4.5px. */
html::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--lw);
  transform: translateX(-50%);
  opacity: 0.07;
  pointer-events: none;
  background-image:
    url("../images/torture-logo-ox-blood.png"),
    linear-gradient(#4A0404, #4A0404),
    linear-gradient(#4A0404, #4A0404),
    linear-gradient(#4A0404, #4A0404),
    linear-gradient(#4A0404, #4A0404);
  background-repeat: no-repeat;
  background-size:
    var(--lw) auto,
    max(1px, calc(var(--lw) * 0.00375)) calc(var(--lt) + var(--lh) * 0.01),
    max(1px, calc(var(--lw) * 0.0025)) calc(100% - var(--lt) - var(--lh) * 0.8857),
    max(1px, calc(var(--lw) * 0.0025)) calc(100% - var(--lt) - var(--lh) * 0.991),
    max(1px, calc(var(--lw) * 0.0028)) calc(100% - var(--lt) - var(--lh) * 0.8857);
  background-position:
    center var(--lt),
    calc(var(--lw) * 0.4947) 0,
    calc(var(--lw) * 0.4417) calc(var(--lt) + var(--lh) * 0.8857),
    calc(var(--lw) * 0.4916) calc(var(--lt) + var(--lh) * 0.991),
    calc(var(--lw) * 0.5441) calc(var(--lt) + var(--lh) * 0.8857);
}

body {
  max-width: 72ch;
  margin: 0 auto;
  padding: 8px 16px 24px;
}

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

a {
  color: var(--ox);
}

:focus-visible {
  outline: 2px solid var(--ox);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  margin: 0.75em 0 0.25em;
}

p {
  margin: 0 0 0.5em;
}

hr {
  border: 0;
  border-top: 1px solid var(--ox);
  margin: 12px 0;
}

/* Source view ------------------------------------------------------------ */

body::before,
body::after,
header::before,
header::after,
nav::before,
nav::after,
main::before,
main::after,
ol::before,
ol::after,
.index li::before,
.index li::after,
form::before,
form::after,
section::before,
section::after,
footer::before,
footer::after,
details::before,
details::after {
  display: block;
  color: var(--dim);
  white-space: pre;
  font-size: 0.75em;
  line-height: 1.2;
}

h1::before,
h1::after,
h2::before,
h2::after,
h3::before,
h3::after,
nav a::before,
nav a::after {
  color: var(--dim);
  font-size: 0.75em;
}

body::before { content: "<body>"; }
body::after { content: "</body>"; }
header::before { content: "  <header>"; }
header::after { content: "  </header>"; }
nav::before { content: "    <nav>"; }
nav::after { content: "    </nav>"; }
nav a::before { content: "<a href=\"" attr(href) "\">"; }
nav a::after { content: "</a>"; }
main::before { content: "  <main>"; }
main::after { content: "  </main>"; }
h1::before { content: "<h1>"; }
h1::after { content: "</h1>"; }
h2::before { content: "<h2>"; }
h2::after { content: "</h2>"; }
h3::before { content: "<h3>"; }
h3::after { content: "</h3>"; }
ol::before { content: "    <ol>"; }
ol::after { content: "    </ol>"; }
.index li::before { content: "      <li id=\"" attr(id) "\">"; }
.index li::after { content: "      </li>"; }
form::before { content: "        <form method=\"post\" action=\"" attr(action) "\">"; }
form::after { content: "        </form>"; }
section::before { content: "    <section>"; }
section::after { content: "    </section>"; }
footer::before { content: "  <footer>"; }
footer::after { content: "  </footer>"; }
details::before { content: "    <details>"; }
details::after { content: "    </details>"; }

/* The lockup is the h1 on the home page; no tag text around a mark. */
.wordmark::before,
.wordmark::after,
summary h2::before,
summary h2::after {
  content: none;
}

/* Header ------------------------------------------------------------------ */

.wordmark {
  display: block;
  margin: 4px 0;
}

.wordmark img {
  display: block;
  height: 120px;
  width: auto;
}

nav {
  margin: 0;
}

nav a,
footer a {
  display: inline-block;
  padding: 6px 0;
  text-decoration: none;
}

nav a:hover,
footer a:hover {
  text-decoration: underline;
}

/* Home -------------------------------------------------------------------- */

.tagline {
  text-transform: uppercase;
  margin: 0.5em 0;
}

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

.index li {
  margin: 0 0 8px;
}

.index img {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0;
}

.num,
.status,
.status-line,
.empty,
dt {
  color: var(--ox);
}

/* Spec data --------------------------------------------------------------- */

dt {
  text-transform: uppercase;
}

dd {
  margin: 0 0 0.75em;
}

/* FAQ --------------------------------------------------------------------- */

details {
  padding: 0;
}

summary {
  cursor: pointer;
  text-transform: uppercase;
}

summary h2 {
  display: inline;
  margin: 0;
}

/* Forms ------------------------------------------------------------------- */

form {
  margin: 0;
}

label {
  display: inline;
}

::placeholder {
  color: var(--dim);
  opacity: 1;
}

/* The form is a prompt line: Email: ________ [Join] */
input,
button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  line-height: 1.5;
}

input[type="email"] {
  border-bottom: 1px solid var(--ox);
  padding: 0 4px;
  margin: 0 8px 0 4px;
  max-width: 100%;
}

button {
  color: var(--ox);
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--ox);
  padding: 0 8px;
}

button:hover,
button:focus-visible {
  border-color: var(--green);
  outline-color: var(--green);
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.help {
  margin-top: 8px;
}

/* Footer ------------------------------------------------------------------ */

footer {
  margin-top: 16px;
}