:root {
  --navy: #06152c;
  --navy-deep: #04101f;
  --cream: #f4ead4;
  --text: #f3f1ec;
  --muted: #c9c4b8;
  --line: rgba(243, 241, 236, 0.18);
  --input: #f7f4ee;
  --focus: #d6b36a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--navy);
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--navy);
  color: var(--text);
  font-family: "Source Serif 4", "Georgia", "Times New Roman", serif;
  font-optical-sizing: auto;
}

body {
  min-height: 100vh;
}

/* Fixed painting. The navy panel scrolls over it. */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--navy);
  background-image: url("img/prometheus-hero-1600.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
  pointer-events: none;
}

@media (max-width: 800px) {
  .bg {
    background-image: url("img/prometheus-hero-800.jpg");
    /* iOS ignores background-attachment: fixed; the spacer still reveals it. */
    background-attachment: scroll;
  }
}

/* Landscape phones: zoom on the figure, same idea as desktop. */
@media (max-width: 800px) and (orientation: landscape) {
  .bg {
    background-position: 58% top;
    background-size: cover;
  }
}

/*
  Portrait phones: cover + a tall viewport crops to the face and
  loses the torch on the left. Size the painting to the screen
  width instead so the raised torch and head both sit in the
  visible strip above the navy panel.
*/
@media (max-width: 800px) and (orientation: portrait) {
  .bg {
    background-size: 118% auto;
    background-position: 28% top;
    background-repeat: no-repeat;
  }
}

@media (min-width: 801px) and (max-width: 1400px) {
  .bg {
    background-image: url("img/prometheus-hero-1200.jpg");
  }
}

/* Transparent window so the fixed painting is visible before the panel. */
.hero {
  position: relative;
  z-index: 1;
  height: 42vh;
  min-height: 260px;
  max-height: 520px;
}

@media (min-width: 900px) {
  .hero {
    height: 46vh;
    min-height: 340px;
  }
}

@media (max-width: 600px) {
  .hero {
    height: 38vh;
    min-height: 240px;
  }
}

@media (max-width: 800px) and (orientation: portrait) {
  .hero {
    height: 42vh;
    min-height: 260px;
    max-height: 420px;
  }
}

.panel {
  position: relative;
  z-index: 2;
  background: var(--navy);
  min-height: 78vh;
  padding: 7.5vh 1.5rem 8vh;
}

.panel-inner {
  width: min(34rem, 100%);
  margin: 0 auto;
  text-align: center;
}

.wordmark {
  margin: 0;
  font-family: "Playfair Display", "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(2.35rem, 7.2vw, 3.85rem);
  letter-spacing: 0.045em;
  line-height: 1.12;
  color: #fff;
}

.etymology {
  margin: 1.15rem auto 0;
  max-width: 24rem;
  font-size: clamp(0.92rem, 2.1vw, 1.05rem);
  line-height: 1.55;
  color: var(--muted);
  font-weight: 400;
}

.etymology em {
  font-style: italic;
  color: var(--cream);
}

.pos {
  margin: 1.65rem 0 0;
  font-family: "Playfair Display", "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  color: #fff;
}

.defs {
  display: inline-block;
  width: max-content;
  max-width: min(24rem, 100%);
  margin: 1.35rem auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
  counter-reset: def;
}

.defs li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  column-gap: 0.35rem;
  margin: 0 0 0.95rem;
  font-size: clamp(1rem, 2.3vw, 1.12rem);
  line-height: 1.5;
  color: var(--text);
  counter-increment: def;
}

.defs li:last-child {
  margin-bottom: 0;
}

.defs li::before {
  content: counter(def) ".";
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cta {
  margin-top: clamp(4.5rem, 14vh, 7.5rem);
}

.coming {
  margin: 0;
  font-family: "Playfair Display", "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(2rem, 5.6vw, 2.75rem);
  letter-spacing: 0.01em;
  color: #fff;
}

.signup-label {
  margin: 1.15rem 0 0.85rem;
  font-size: 1.02rem;
  color: var(--muted);
}

.signup {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  width: min(22rem, 100%);
  margin: 0 auto;
}

.signup input[type="email"] {
  flex: 1;
  height: 2.15rem;
  border: 0;
  padding: 0 0.7rem;
  background: var(--input);
  color: #1a1a1a;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
}

.signup input[type="email"]:focus {
  box-shadow: 0 0 0 2px var(--focus);
}

.signup button {
  flex: 0 0 auto;
  height: 2.15rem;
  padding: 0 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.signup button:hover,
.signup button:focus-visible {
  background: #fff;
  color: var(--navy);
}

.signup button:disabled {
  opacity: 0.55;
  cursor: default;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  min-height: 1.4em;
  margin: 0.85rem 0 0;
  font-size: 0.95rem;
  color: var(--cream);
}

.form-status.error {
  color: #e8b4b4;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}