:root {
  color-scheme: dark;

  --paper: #f3efe5;
  --ink: #292821;
  --quiet: #746f63;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: #000;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}


/* SCENES */

.scene {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

.scene[hidden] {
  display: none;
}

.scene-stage {
  position: relative;
  width: min(100vw, 150svh);
  aspect-ratio: 3 / 2;
}

.scene-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}


/* INVISIBLE HOTSPOTS */

.hotspot {
  position: absolute;
  z-index: 2;

  padding: 0;
  border: 0;

  background: transparent;
  cursor: pointer;
}

.hotspot:focus:not(:focus-visible) {
  outline: none;
}

.hotspot:focus-visible {
  outline: 1px dotted rgba(255, 255, 255, .55);
  outline-offset: 2px;
}


/* TRAILHEAD */

.trailhead-contact {
  left: 72%;
  top: 27%;
  width: 26%;
  height: 50%;
}

.trailhead-town {
  left: 50%;
  top: 37%;
  width: 15%;
  height: 10%;
}


/*
  TOWN SIGN HOTSPOTS
*/


/* SALOON */

.town-saloon {
  left: 3.0%;
  top: 6.0%;
  width: 16.5%;
  height: 19.0%;
}


/* NOON MEETING */

.town-noon-meeting {
  left: 4.7%;
  top: 33.0%;
  width: 5.8%;
  height: 6.0%;
}


/* LIBRARY */

.town-library {
  left: 25.8%;
  top: 49.0%;
  width: 5.6%;
  height: 5.0%;
}


/* TOWN HALL */

.town-town-hall {
  left: 36.1%;
  top: 44.5%;
  width: 5.3%;
  height: 5.0%;
}


/* CHURCH */

.town-church {
  left: 47.5%;
  top: 38.5%;
  width: 4.8%;
  height: 12.0%;
}


/* BROTHEL */

.town-brothel {
  left: 56.3%;
  top: 45.0%;
  width: 6.5%;
  height: 5.0%;
}


/* CITY HALL */

.town-city-hall {
  left: 65.4%;
  top: 45.0%;
  width: 7.3%;
  height: 5.0%;
}


/* CLINIC */

.town-clinic {
  left: 73.1%;
  top: 48.5%;
  width: 5.7%;
  height: 7.5%;
}


/* CAFÉ */

.town-cafe {
  left: 80.4%;
  top: 35.0%;
  width: 5.0%;
  height: 8.0%;
}


/* MERCANTILE / C&LP */

.town-mercantile {
  left: 86.5%;
  top: 19.0%;
  width: 12.5%;
  height: 19.0%;
}


/* CONTACT DIALOG */

dialog {
  width: min(30rem, calc(100% - 2rem));
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
}

dialog::backdrop {
  background: rgba(0, 0, 0, .58);
}

.letter {
  position: relative;

  padding: clamp(2rem, 6vw, 3.25rem);

  border: 1px solid rgba(71, 65, 52, .17);

  background: #f8f4e9;

  box-shadow:
    0 1.4rem 4rem rgba(0, 0, 0, .35);
}

.close {
  position: absolute;
  top: .65rem;
  right: .8rem;

  padding: .25rem .4rem;
  border: 0;

  color: var(--quiet);
  background: none;

  font: 1.35rem/1 Georgia, serif;
  cursor: pointer;
}

h2 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 400;
}

#form-title,
.mail-destination {
  text-align: center;
}

#form-title {
  margin-bottom: 0;
}

.mail-destination {
  margin-top: 0;
}

label {
  display: block;
  margin: 1rem 0 .35rem;
  font-size: .83rem;
  letter-spacing: .04em;
}

label span {
  color: var(--quiet);
  font-size: .76rem;
  font-style: italic;
}

input,
textarea {
  display: block;

  width: 100%;

  padding: .55rem .1rem;

  border: 0;
  border-bottom: 1px solid rgba(50, 47, 39, .35);
  border-radius: 0;

  color: var(--ink);
  background: transparent;

  font: 1rem/1.5 Georgia, serif;
}

textarea {
  resize: vertical;
}

input:focus,
textarea:focus {
  outline: 0;
  border-bottom-color: var(--ink);
}

.send {
  margin-top: 1.6rem;
  padding: .55rem 1.15rem;

  border: 1px solid rgba(50, 47, 39, .65);

  color: var(--ink);
  background: transparent;

  font: .82rem Georgia, serif;
  cursor: pointer;
}

.send:hover,
.send:focus-visible {
  color: var(--paper);
  background: var(--ink);
}

.status {
  min-height: 1.2em;
  margin: .8rem 0 0;
  color: var(--quiet);
  font-size: .78rem;
}

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

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;
  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;
  border: 0;
}