/* Oregon Trail, about 1992.

   Deliberately not a sibling of the Lotus page. Both are text on a dark screen,
   and if the palette were shared they would read as the same costume twice, so
   this one is black, bone white, amber and grass green where that one is blue
   and cyan, and the type here is a shade larger and set wider.

   The tombstone is a slab with engraved text: an inset shadow doing the work of
   the chisel. It is the one picture on the page and it earns its place, because
   the epitaph on it is the argument the whole page is making. */

:root {
  --ot-black: #0d0d0c;
  --ot-bone:  #e8e2d4;
  --ot-amber: #f0b429;
  --ot-grass: #5a9e3c;
  --ot-stone: #9a978d;
  --ot-dim:   #9b968a;
  --ot-red:   #d95b4a;
  --ot-orange:#E87722;
}

body {
  background: #241d16;
  color: var(--ot-bone);
  font: 16px/1.65 ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 20px 12px 44px;
}

.ot { max-width: 940px; margin: 0 auto; }

.ot-screen {
  background: var(--ot-black);
  border: 14px solid #3a2f24;
  border-radius: 6px;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .8), 0 14px 40px rgba(0, 0, 0, .55);
  padding: 26px 30px 0;
  /* The ground: a green strip along the bottom of the screen, which is all the
     scenery this needs. */
  background-image: linear-gradient(transparent 0, transparent calc(100% - 26px), var(--ot-grass) calc(100% - 26px));
}

a { color: var(--ot-amber); }
a:hover, a:focus { color: var(--ot-bone); }

.ot-banner {
  text-align: center; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ot-grass); font-size: 13px; margin: 0 0 18px;
}

.ot-screen h1 {
  font: 700 clamp(22px, 4.4vw, 34px)/1.25 inherit;
  color: var(--ot-bone);
  text-align: center;
  margin: 0 0 22px;
}
.ot-screen h2 { font: 700 19px/1.35 inherit; color: var(--ot-amber); margin: 30px 0 6px; }
.ot-screen h3 { font: 700 15px/1.4 inherit; color: var(--ot-bone); margin: 16px 0 2px; }
.ot-screen p  { margin: 8px 0; max-width: 76ch; }
.ot-lead { color: var(--ot-bone); font-size: 17px; }
.ot-note { color: var(--ot-dim); font-size: 14px; }
.ot-list { margin: 8px 0; padding: 0 0 0 24px; max-width: 76ch; }
.ot-list li { margin-bottom: 9px; }

/* ── The tombstone ─────────────────────────────────────────────────────── */

.ot-grave {
  max-width: 420px; margin: 0 auto 26px;
  background: linear-gradient(180deg, #b3b0a6, var(--ot-stone));
  border-radius: 200px 200px 6px 6px;
  padding: 42px 30px 30px;
  text-align: center;
  color: #33312c;
  box-shadow: inset 0 3px 10px rgba(255, 255, 255, .45), inset 0 -6px 16px rgba(0, 0, 0, .28);
}
.ot-grave p { max-width: none; }
.ot-grave-head {
  margin: 0 0 8px !important;
  letter-spacing: .28em; text-transform: uppercase; font-size: 12px;
  color: #55524a;
}
.ot-grave-text {
  margin: 0 !important;
  font-weight: 700; font-size: 16px; line-height: 1.5;
  /* Evens the line lengths so the epitaph does not end on a widowed word,
     which on something shaped like a headstone looks like a mistake. */
  text-wrap: balance;
  /* Engraved: a light shadow below the letters and a dark one above. */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 -1px 0 rgba(0, 0, 0, .25);
}

/* ── The general store ─────────────────────────────────────────────────── */

.ot-store {
  border: 3px double var(--ot-bone);
  padding: 16px 20px 20px;
  margin: 26px 0;
}
.ot-store h2 { margin-top: 0; }

.ot-supplies { list-style: none; margin: 14px 0 0; padding: 0; }
.ot-supplies > li { margin-bottom: 16px; }

.ot-supply { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.ot-check {
  flex: 0 0 auto;
  width: 18px; height: 18px; margin: 3px 0 0;
  accent-color: var(--ot-grass);
}
.ot-check:focus-visible { outline: 2px solid var(--ot-orange); outline-offset: 2px; }
.ot-supply-name { font-weight: 700; color: var(--ot-bone); }
.ot-supply:hover .ot-supply-name { color: var(--ot-amber); }
.ot-supply-why {
  margin: 3px 0 0 30px !important;
  color: var(--ot-dim); font-size: 14px;
}

.ot-verdict {
  margin-top: 20px; border-top: 1px solid #3a382f; padding-top: 14px;
}
.ot-verdict-head {
  margin: 0 0 4px !important;
  color: var(--ot-amber); letter-spacing: .2em; text-transform: uppercase; font-size: 12px;
}
.ot-verdict-text { margin: 0 !important; color: var(--ot-bone); font-size: 16px; }

/* ── The form ──────────────────────────────────────────────────────────── */

.ot-box {
  border: 3px double var(--ot-amber);
  background: #16150f;
  padding: 16px 20px 20px;
  margin: 26px 0;
  max-width: 620px;
}
.ot-box h2 { margin-top: 0; }

.ot-field { margin: 0 0 12px; max-width: 520px; }
.ot-field label { display: block; color: var(--ot-amber); font-size: 14px; margin-bottom: 3px; }
.ot-field input, .ot-field textarea {
  width: 100%; padding: 5px 8px;
  background: var(--ot-black); color: var(--ot-bone);
  border: 1px solid var(--ot-dim);
  font: inherit; font-size: 15px;
}
.ot-field input:focus, .ot-field textarea:focus { outline: 2px solid var(--ot-orange); outline-offset: 1px; }
.ot-field.is-bad input, .ot-field.is-bad textarea { border-color: var(--ot-red); }
.ot-field ::placeholder { color: #6d685c; }

.rt-field-err { color: var(--ot-red); font-size: 13px; margin: 4px 0 0; }
.rt-err { border: 1px solid var(--ot-red); color: var(--ot-red); padding: 9px 11px; font-size: 14px; margin: 0 0 12px; }

.ot-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 16px 0 0; }
.ot-actions button {
  background: var(--ot-amber); color: #2a2109;
  border: 0; padding: 8px 24px;
  font: 700 15px/1.3 inherit; cursor: pointer;
}
.ot-actions button:hover, .ot-actions button:focus { background: var(--ot-bone); }

/* ── The status line, sitting on the grass ─────────────────────────────── */

.ot-status {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  padding: 4px 0 6px;
  margin-top: 30px;
  position: relative; z-index: 1;
  color: #123a08; font-size: 13px;
}
.ot-status b { color: #0d2c06; }

@media (max-width: 620px) {
  .ot-screen { border-width: 7px; padding: 18px 16px 0; }
  .ot-grave { padding: 34px 20px 24px; }
  body { padding: 10px 6px 30px; }
}