:root {
  color-scheme: dark;
  --blue: #123f5b;
  --blue-deep: #082c42;
  --blue-light: #b9dce4;
  --paper: #f7f2e8;
  --white: #fffdf7;
  --line: rgb(255 255 255 / 22%);
  --serif: Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--white);
  background: var(--blue-deep);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.construction-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, .75fr);
}

.construction-copy {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(30px, 5vw, 72px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgb(5 35 52 / 88%), rgb(10 50 70 / 48%)),
    url("assets/images/refuge-hero.jpg") center / cover;
}

.construction-logo { width: min(250px, 58vw); height: auto; }
.construction-message { position: relative; z-index: 1; max-width: 760px; padding: 16vh 0 10vh; }

.construction-kicker {
  margin: 0 0 24px;
  color: var(--blue-light);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  max-width: 11ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 7vw, 6rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .94;
  text-wrap: balance;
}

h1 em { color: var(--blue-light); font-weight: 400; }
.construction-message > p:last-child { max-width: 60ch; margin: 32px 0 0; color: rgb(255 253 247 / 80%); font-size: 1rem; line-height: 1.7; }
.construction-signature { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-style: italic; }

.preview-access {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  gap: clamp(44px, 8vh, 88px);
  padding: clamp(32px, 5vw, 72px);
  color: #193847;
  background: var(--paper);
}

.preview-number { display: block; margin-bottom: 30px; color: #548292; font-family: var(--serif); font-size: 1rem; }
h2 { max-width: 12ch; margin: 0; color: var(--blue-deep); font-family: var(--serif); font-size: clamp(2rem, 3.2vw, 3.2rem); font-weight: 400; line-height: 1; }
.preview-access > div p { max-width: 38ch; margin: 20px 0 0; color: #58707a; line-height: 1.65; }

#preview-form { display: grid; gap: 10px; }
#preview-form label { color: var(--blue-deep); font-size: .76rem; font-weight: 750; }
.preview-field { display: flex; border-bottom: 1px solid #92a9b1; }
.preview-field:focus-within { border-color: var(--blue); box-shadow: 0 2px 0 var(--blue); }
.preview-field input { min-width: 0; flex: 1; padding: 15px 0; border: 0; outline: 0; color: var(--blue-deep); background: transparent; font: 1rem var(--sans); }
.preview-field button { padding: 0 0 0 20px; border: 0; color: var(--blue); background: transparent; font: 750 .82rem var(--sans); cursor: pointer; }
.preview-field button:disabled { opacity: .5; cursor: wait; }
.preview-error { margin: 5px 0 0; color: #a13f3b; font-size: .82rem; }
.preview-note { margin: 0; color: #78909a; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 760px) {
  .construction-shell { grid-template-columns: 1fr; }
  .construction-copy { min-height: 68vh; }
  .preview-access { min-height: auto; padding-block: 64px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }