@font-face {
  font-family: "GT America Regular";
  src: url("fonts/GT-America-Regular.woff2") format("woff2"),
       url("fonts/GT-America-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT America Light";
  src: url("fonts/GT-America-Standard-Light.woff2") format("woff2"),
       url("fonts/GT-America-Standard-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f8f8f8;
  --fg: #000000;
  --muted: #7a7a7a;
  --icon: #9b9b9b;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-family: "GT America Light", -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.slide.active {
  display: flex;
}

.slide-inner {
  width: 100%;
  text-align: center;
}

.slide--intro .slide-inner,
.slide--home .slide-inner,
.slide--closing .slide-inner {
  max-width: clamp(520px, 36.0111vw, 936px);
}

.slide--project .slide-inner {
  max-width: none;
}

/* Type scale, from Figma spec (sizes are true at a 1444px-wide viewport,
   held flat below that, and allowed to grow up to 1.8x on larger screens) */
.headline,
.tagline {
  font-family: "GT America Regular";
  font-weight: 400;
  font-size: clamp(20px, 1.385vw, 36px); /* h1: 20px / 150% */
  line-height: 1.5;
}

.headline {
  margin: 0 0 1.9em;
}

.body-text p {
  font-family: "GT America Light";
  font-weight: 300;
  font-size: clamp(15px, 1.0388vw, 27px); /* h2: 15px / 160% */
  line-height: 1.6;
  margin: 0 0 1.2em;
}

.body-text p:last-child {
  margin-bottom: 0;
}

/* Home & closing slides */
.icon-row {
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 26px;
  cursor: default;
}

.icon-row img {
  width: clamp(20px, 1.385vw, 36px);
  height: auto;
  transition: transform 0.2s ease;
}

.icon-row:hover img.icon-peace {
  transform: translateY(-4px);
}

.icon-row:hover img.icon-atown {
  transform: translateY(4px);
}

.tagline {
  margin: 0;
}

.slide--closing .icon-row {
  margin-bottom: 0;
  margin-top: 22px;
}

.slide--closing .tagline a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  cursor: pointer;
}

/* Home password field */
.password-form {
  position: absolute;
  left: 50%;
  bottom: 11%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.554vw, 14.4px);
  background: #ffffff;
  border: none;
  border-radius: 999px;
  padding: clamp(5px, 0.3463vw, 9px) clamp(5px, 0.3463vw, 9px) clamp(5px, 0.3463vw, 9px) clamp(18px, 1.2465vw, 32.4px);
}

.password-form input {
  border: none;
  outline: none;
  background: transparent;
  font-family: "GT America Light";
  font-weight: 300;
  font-size: clamp(0.85rem, 0.9418vw, 1.53rem);
  color: var(--fg);
  cursor: text;
  width: clamp(170px, 11.7729vw, 306px);
}

.password-form input::placeholder {
  color: #9b9b9b;
}

.password-form button {
  width: clamp(26px, 1.8006vw, 46.8px);
  height: clamp(26px, 1.8006vw, 46.8px);
  border-radius: 50%;
  border: 1px solid #9b9b9b;
  background: #ffffff;
  color: #9b9b9b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.1s ease, color 0.1s ease;
}

.password-form button:hover {
  border-color: #656565;
  color: #656565;
}

.password-form button svg {
  width: clamp(12px, 0.831vw, 21.6px);
  height: clamp(12px, 0.831vw, 21.6px);
  color: currentColor;
}

@keyframes password-shake {
  0% {
    transform: translateX(-50%);
  }
  20% {
    transform: translateX(calc(-50% - 10px));
  }
  40% {
    transform: translateX(calc(-50% + 8px));
  }
  60% {
    transform: translateX(calc(-50% - 6px));
  }
  80% {
    transform: translateX(calc(-50% + 5px));
  }
  100% {
    transform: translateX(-50%);
  }
}

.password-form.shake {
  animation: password-shake 0.5s;
}

/* Project slides */
.project-image-wrap {
  margin: 0 auto;
  display: block;
}

.project-image-wrap img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
  margin: 0 auto;
}

.project-caption {
  margin-top: 1.6em;
}

.project-title {
  font-family: "GT America Regular";
  font-weight: 400;
  font-size: clamp(22px, 1.5235vw, 39.6px); /* h3: 22px / auto */
  line-height: normal;
  margin: 0;
}

.project-date {
  font-family: "GT America Light";
  font-weight: 300;
  font-size: clamp(13px, 0.9003vw, 23.4px); /* h4: 13px / auto */
  line-height: normal;
  color: var(--muted);
  margin: 0.4em 0 0;
}

/* Small screens */
@media (max-width: 600px) {
  .slide {
    padding: 24px;
  }

  .headline {
    margin-bottom: 1.5em;
  }

  .password-form {
    bottom: 8%;
  }

  .project-image-wrap img {
    max-height: 56vh;
  }
}

@media (max-height: 500px) {
  .project-image-wrap img {
    max-height: 78vh;
  }
}