:root {
  color-scheme: dark;

  --ink: #efe8d6;
  --muted: #c3b9a4;

  --wood: #2f2018;
  --wood-dark: #1b130e;

  --glass: rgba(255, 255, 255, 0.04);

  --gold: #d9b468;
  --red: #a44632;
}

* {
  box-sizing: border-box;
}

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

html {
  background: #111817;
}

body {
  min-height: 100vh;
  min-height: 100dvh;

  overflow-x: hidden;

  background: #111817;
  color: var(--ink);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 18px;
  line-height: 1.6;
}

button {
  font: inherit;
}


/* WORLD */

#landscape {
  position: fixed;
  inset: 0;

  z-index: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


/* WINDOW */

.window-frame {
  position: fixed;
  inset: 0;

  z-index: 8;

  pointer-events: none;
}

.window-frame::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.025),
      transparent 45%
    );

  pointer-events: none;
}

.beam {
  position: absolute;

  background:
    linear-gradient(
      90deg,
      #251912,
      #3c2a1f 40%,
      #21160f
    );

  box-shadow:
    0 2px 12px
    rgba(0,0,0,0.4);
}

.beam-top {
  left: 0;
  top: 0;

  width: 100%;
  height: 34px;
}

.beam-bottom {
  left: 0;
  bottom: 0;

  width: 100%;
  height: 50px;
}

.beam-left {
  left: 0;
  top: 0;

  width: 30px;
  height: 100%;
}

.beam-right {
  right: 0;
  top: 0;

  width: 30px;
  height: 100%;
}

.mullion {
  position: absolute;

  top: 0;
  bottom: 0;

  width: 12px;

  background:
    linear-gradient(
      90deg,
      #241811,
      #493226,
      #21150f
    );

  box-shadow:
    1px 0 8px
    rgba(0,0,0,0.35);
}

.mullion-one {
  left: 33.333%;
}

.mullion-two {
  left: 66.666%;
}


/* LABEL */

.lookout-name {
  position: fixed;

  z-index: 12;

  left: 48px;
  top: 52px;

  color:
    rgba(244, 234, 211, 0.65);

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;
  letter-spacing: 0.14em;

  pointer-events: none;
}


/* CONTENT */

main {
  position: relative;
  z-index: 4;
}

.scene {
  position: relative;

  min-height: 115vh;
  min-height: 115dvh;

  pointer-events: none;
}

.scene-copy {
  position: absolute;

  left: clamp(52px, 9vw, 150px);
  top: 38%;

  width: min(
    500px,
    calc(100% - 104px)
  );

  text-shadow:
    0 2px 14px
    rgba(0,0,0,0.55);
}

.scene-copy.right {
  left: auto;
  right: clamp(52px, 9vw, 150px);

  text-align: right;
}

.scene-copy span,
.field-note span {
  display: block;

  margin-bottom: 16px;

  color:
    rgba(245, 228, 191, 0.68);

  font-family:
    "Courier New",
    monospace;

  font-size: 11px;
}

.scene h1,
.scene h2 {
  margin: 0 0 20px;

  font-weight: 400;
  line-height: 0.98;
}

.scene h1 {
  font-size:
    clamp(
      64px,
      12vw,
      148px
    );
}

.scene h2 {
  font-size:
    clamp(
      42px,
      7vw,
      83px
    );
}

.scene-copy p {
  margin: 0 0 14px;

  font-size: 22px;
}

.scene-copy .large {
  font-size:
    clamp(
      37px,
      6vw,
      69px
    );

  line-height: 1.08;
}


/* little paper note */

.field-note {
  position: absolute;

  left: 15%;
  top: 44%;

  width: 270px;

  padding: 20px 22px;

  transform:
    rotate(-1.5deg);

  background:
    rgba(233, 220, 187, 0.86);

  color: #33291e;

  box-shadow:
    0 4px 18px
    rgba(0,0,0,0.22);

  font-family:
    "Courier New",
    monospace;

  font-size: 14px;
}

.field-note span {
  color: #7a654a;
}

.field-note p {
  margin: 0 0 10px;
}


/* night */

.night-copy {
  top: 48%;
}


/* CABIN */

.cabin {
  position: relative;

  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  align-items: flex-end;

  padding:
    80px
    max(50px, env(safe-area-inset-right))
    max(70px, env(safe-area-inset-bottom))
    max(50px, env(safe-area-inset-left));

  background:
    linear-gradient(
      to bottom,
      transparent 0 40%,
      rgba(24, 15, 10, 0.4)
        40%,
      rgba(21, 13, 8, 0.96)
        68%
    );
}

.desk {
  position: relative;

  width: min(850px, 100%);

  min-height: 260px;

  margin: 0 auto;

  padding: 32px;

  border-top:
    16px solid #4c3121;

  background:
    linear-gradient(
      110deg,
      #3a2519,
      #251810
    );

  box-shadow:
    0 -10px 40px
    rgba(0,0,0,0.35);
}


/* LOGBOOK */

.logbook {
  width: min(
    420px,
    70%
  );

  padding: 20px 22px;

  transform:
    rotate(-1deg);

  background: #d8ceb4;
  color: #2d2922;

  box-shadow:
    0 4px 14px
    rgba(0,0,0,0.3);

  font-family:
    "Courier New",
    monospace;

  font-size: 13px;
}

.logbook p {
  margin: 0 0 9px;
}

.log-title {
  padding-bottom: 7px;

  border-bottom:
    1px solid #706750;

  font-weight: bold;
}

.scribble {
  margin-top: 17px !important;

  font-family:
    "Comic Sans MS",
    cursive;

  font-size: 14px;
}


/* BINOCULARS */

.binoculars {
  position: absolute;

  right: 145px;
  bottom: 54px;

  appearance: none;

  border: 0;

  padding: 8px;

  background: transparent;
  color: #171717;

  font-size: 42px;

  letter-spacing: -8px;

  cursor: pointer;

  transform:
    rotate(7deg);

  text-shadow:
    0 2px 2px
    rgba(255,255,255,0.06);
}

.binoculars:hover {
  transform:
    rotate(4deg)
    scale(1.05);
}


/* COMPASS */

.compass {
  position: absolute;

  right: 72px;
  top: 45px;

  width: 47px;
  height: 47px;

  appearance: none;

  border:
    2px solid #9e8559;

  border-radius: 50%;

  background:
    #28251d;

  color: #e7d4a5;

  font-family:
    "Courier New",
    monospace;

  font-size: 13px;
  font-weight: bold;

  cursor: pointer;

  transition:
    transform 600ms ease;
}


/* RADIO */

.radio {
  position: absolute;

  right: 32px;
  bottom: 24px;

  appearance: none;

  border:
    2px solid #191917;

  padding:
    10px 12px;

  background:
    #535249;

  color: #d9d5c5;

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;

  cursor: pointer;
}

.radio-light {
  display: inline-block;

  width: 7px;
  height: 7px;

  margin-right: 6px;

  border-radius: 50%;

  background: #8b2d20;

  box-shadow:
    0 0 5px
    rgba(176, 64, 40, 0.5);
}


/* BINOCULAR OVERLAY */

.scope {
  position: fixed;
  inset: 0;

  z-index: 30;

  display: none;
  align-items: center;
  justify-content: center;

  background:
    rgba(0,0,0,0.88);

  cursor: zoom-out;
}

.scope.active {
  display: flex;
}

.scope-circle {
  position: relative;

  width: min(
    78vw,
    650px
  );

  aspect-ratio: 1;

  overflow: hidden;

  border:
    18px solid #050505;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 60% 55%,
      #766f50 0 2%,
      transparent 3%
    ),
    linear-gradient(
      to bottom,
      #8096a0 0 42%,
      #536854 42% 58%,
      #253b2b 58%
    );

  box-shadow:
    0 0 0 2000px #000;
}

.scope-circle::before,
.scope-circle::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 42%;

  background:
    polygon;
}

.scope-circle::before {
  clip-path:
    polygon(
      0 70%,
      18% 35%,
      34% 55%,
      48% 22%,
      63% 50%,
      80% 28%,
      100% 62%,
      100% 100%,
      0 100%
    );

  background: #314a33;
}

.scope-circle::after {
  clip-path:
    polygon(
      0 78%,
      20% 60%,
      38% 72%,
      55% 48%,
      72% 73%,
      89% 57%,
      100% 72%,
      100% 100%,
      0 100%
    );

  background: #1e3424;
}

.crosshair {
  position: absolute;

  z-index: 5;

  background:
    rgba(0,0,0,0.45);
}

.horizontal {
  left: 0;
  right: 0;
  top: 50%;

  height: 1px;
}

.vertical {
  top: 0;
  bottom: 0;
  left: 50%;

  width: 1px;
}

#scope-note {
  position: absolute;
  z-index: 6;

  right: 13%;
  bottom: 11%;

  color:
    rgba(255,255,255,0.7);

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;
}


/* SECRET MESSAGE */

.secret-message {
  position: fixed;

  z-index: 50;

  left: 50%;
  bottom: 70px;

  transform:
    translateX(-50%)
    translateY(15px);

  opacity: 0;

  padding:
    8px 12px;

  background:
    rgba(14, 12, 9, 0.86);

  color: #dbc798;

  font-family:
    "Courier New",
    monospace;

  font-size: 11px;

  pointer-events: none;

  transition:
    opacity 400ms ease,
    transform 400ms ease;
}

.secret-message.visible {
  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0);
}


/* PHONE */

@media (max-width: 700px) {
  .beam-left,
  .beam-right {
    width: 18px;
  }

  .beam-top {
    height: 22px;
  }

  .beam-bottom {
    height: 32px;
  }

  .mullion {
    width: 8px;
  }

  .lookout-name {
    left: 33px;
    top: 38px;
  }

  .scene {
    min-height: 115dvh;
  }

  .scene-copy {
    left: 34px;

    width:
      calc(100% - 68px);
  }

  .scene-copy.right {
    left: auto;
    right: 34px;
  }

  .field-note {
    left: 10%;

    width: 245px;
  }

  .cabin {
    padding:
      70px
      20px
      max(
        48px,
        env(safe-area-inset-bottom)
      );
  }

  .desk {
    padding: 24px 18px;

    min-height: 300px;
  }

  .logbook {
    width: 78%;
  }

  .binoculars {
    right: 80px;
    bottom: 43px;

    font-size: 34px;
  }

  .compass {
    right: 28px;
    top: 38px;
  }

  .radio {
    right: 18px;
    bottom: 15px;
  }

  .scope-circle {
    width: 88vw;

    border-width: 12px;
  }
}

.window-frame,
.lookout-name {
  transition: opacity 500ms ease;
}

body.desk-view .window-frame,
body.desk-view .lookout-name {
  opacity: 0;
}