:root {
  --paper: #ffd400;
  --paper-hot: #ffcc00;
  --ink: #090909;
  --rust: #a62a16;
  --pale: #fff2a3;
  --line: 3px solid var(--ink);
}

* { box-sizing: border-box; }

html { background: #050505; color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
    #050505;
  font-family: "Courier New", Courier, monospace;
  line-height: 1.5;
}

a { color: inherit; }

.sheet {
  width: min(1040px, calc(100% - 24px));
  margin: 22px auto;
  padding: clamp(16px, 4vw, 46px);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 9%, rgba(0,0,0,.11) 0 1px, transparent 2px),
    radial-gradient(circle at 87% 66%, rgba(0,0,0,.08) 0 1px, transparent 2px),
    repeating-linear-gradient(93deg, transparent 0 13px, rgba(0,0,0,.018) 14px 15px),
    var(--paper);
  background-size: 23px 19px, 31px 29px, auto, auto;
  border: 5px solid var(--paper);
  box-shadow: 0 0 0 4px #000, 12px 12px 0 #241f00;
  transform: rotate(-.08deg);
}

.utility {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 8px;
  border: var(--line);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.masthead {
  display: block;
  width: min(100%, 860px);
  margin: 22px auto 10px;
  filter: contrast(1.35);
}

.tabs {
  width: 100%;
  margin: 22px 0 34px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: clamp(.63rem, 1.25vw, .83rem);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.tabs td { border: 2px solid var(--ink); }
.tabs a { display: block; padding: 8px 3px; text-decoration: none; }
.tabs a:hover, .tabs a:focus, .tabs a[aria-current="page"] { color: var(--paper); background: var(--ink); }

h1, h2, h3 { line-height: 1; text-transform: uppercase; }
h1 { margin: 10px 0 16px; font-size: clamp(2.3rem, 8vw, 6.8rem); letter-spacing: -.06em; }
h2 { margin: 30px 0 10px; padding: 8px 10px 6px; color: var(--paper); background: var(--ink); font-size: clamp(1.25rem, 3vw, 2rem); }
h3 { border-bottom: 2px solid var(--ink); }

p { max-width: 76ch; font-weight: 700; }
.lead { font-size: clamp(1.12rem, 2vw, 1.42rem); font-weight: 900; }
.drop::first-letter { float: left; margin: .08em .12em 0 0; font: 900 3.7em/.72 Impact, sans-serif; }
.warning { margin: 22px 0; padding: 13px; border: 7px double var(--ink); font-weight: 900; text-align: center; text-transform: uppercase; }
.red-stamp { display: inline-block; padding: 5px 10px; color: var(--rust); border: 5px double var(--rust); font: 900 1.15rem/1 Impact, sans-serif; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-3deg); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.panel { padding: 12px 16px; border: var(--line); box-shadow: 5px 5px 0 var(--ink); }
.panel h2 { margin-top: 0; }
.artbox { margin: 15px auto; padding: 12px; border: 4px solid var(--ink); background: var(--paper-hot); }
.artbox img { display: block; width: 100%; max-height: 460px; object-fit: contain; }
.artbox figcaption { padding-top: 8px; border-top: 2px solid var(--ink); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.badge { display: block; width: min(330px, 70vw); margin: 18px auto; transform: rotate(2deg); }
.stamp { width: min(230px, 45vw); float: right; margin: 0 0 12px 16px; transform: rotate(3deg); }
.silhouette { filter: contrast(2); }

.procedure { margin: 14px 0; padding: 0; list-style: none; counter-reset: fieldstep; }
.procedure li { position: relative; margin: 8px 0; padding: 8px 8px 8px 48px; border-bottom: 2px dotted var(--ink); font-weight: 900; }
.procedure li::before { counter-increment: fieldstep; content: counter(fieldstep, decimal-leading-zero); position: absolute; left: 4px; top: 6px; padding: 1px 5px; color: var(--paper); background: var(--ink); }
.observed { padding-left: 1.2rem; }
.observed li { margin: 7px 0; font-weight: 700; }
.observed li::marker { content: "// "; font-weight: 900; }

.route { display: inline-block; margin-top: 24px; padding: 12px 16px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-weight: 900; text-decoration: none; text-transform: uppercase; }
.route:hover, .route:focus { color: var(--paper); background: var(--ink); }
.route::after { content: "  >>"; }
.smallprint { margin-top: 35px; padding-top: 9px; border-top: 2px solid var(--ink); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.big-sequence { margin: 20px 0; font: 900 clamp(1.55rem, 5vw, 3.6rem)/1 Impact, sans-serif; text-align: center; letter-spacing: .05em; }
.checklist { padding: 0; list-style: none; }
.checklist li { margin: 10px 0; padding: 10px 10px 10px 46px; border: 2px solid var(--ink); font-weight: 800; }
.checklist li::before { content: "[ ]"; margin-left: -36px; margin-right: 10px; font-weight: 900; }
.shelf { display: block; padding: 18px; border: 4px solid var(--ink); background: rgba(0,0,0,.08); text-decoration: none; }
.shelf:hover { color: var(--paper); background: var(--ink); }

@media (max-width: 720px) {
  .sheet { width: calc(100% - 12px); margin: 8px auto; padding: 14px; box-shadow: none; }
  .grid { grid-template-columns: 1fr; }
  .tabs, .tabs tbody, .tabs tr { display: block; }
  .tabs tr { display: grid; grid-template-columns: repeat(2, 1fr); }
  .tabs td { display: block; }
  .stamp { float: none; display: block; margin: 10px auto; }
}

@media print {
  html, body { background: white; }
  .sheet { width: 100%; margin: 0; box-shadow: none; }
  .tabs { display: none; }
}