/* nook waitlist — Direction A: Paper Archive */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #f3f0e8; }
[hidden] { display: none !important; }

.page {
  min-height: 100dvh;
  background: #f3f0e8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(30px, 4vw, 52px) clamp(22px, 4vw, 56px);
}

.row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 5vw, 80px);
}

.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3.2vh, 34px);
  width: min(100%, 420px);
}

/* Headline */
.headline {
  margin: 0;
  font-family: 'Caveat', cursive;
  font-weight: 400;
  font-size: clamp(38px, 4.8vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #1a1815;
  text-align: center;
  text-wrap: balance;
}
.wordmark { display: block; }
.wordmark img { height: 0.72em; width: auto; display: block; margin: 0 auto; }
.tagline {
  display: block;
  font-size: 0.58em;
  opacity: 0.72;
  margin-top: 0.3em;
  line-height: 1.15;
}

/* Signup form */
.signup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 288px);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.field input {
  width: 100%;
  border: 1px solid #ded7c7;
  background: #faf8f3;
  border-radius: 999px;
  font-family: 'Newsreader', serif;
  font-size: 14px;
  color: #1a1815;
  padding: 12px 18px;
  text-align: center;
}
.field input::placeholder { color: #1a1815; opacity: 0.4; }
.field input:focus { outline: none; border-color: #c9bfa9; }

.field button {
  width: 100%;
  border: none;
  cursor: pointer;
  background: #1a1815;
  color: #f3f0e8;
  font-family: 'Newsreader', serif;
  font-size: 14px;
  border-radius: 999px;
  padding: 13px 18px;
  transition: background 0.15s ease;
}
.field button:hover { background: #332f28; }
.field button:disabled { opacity: 0.55; cursor: default; }

.subcopy {
  margin: 0;
  font-family: 'Newsreader', serif;
  font-size: 12px;
  line-height: 1.4;
  color: #1a1815;
  opacity: 0.55;
  text-align: center;
}
.error {
  margin: 2px 0 0;
  font-family: 'Newsreader', serif;
  font-size: 12.5px;
  line-height: 1.4;
  color: #9a3b2e;
  text-align: center;
}

/* Success state */
.success { text-align: center; width: min(100%, 340px); }
.success-lead {
  margin: 0;
  font-family: 'Newsreader', serif;
  font-size: 20px;
  color: #1a1815;
}
.success-note {
  margin: 0.5em 0 0;
  font-family: 'Newsreader', serif;
  font-size: 14px;
  line-height: 1.55;
  color: #1a1815;
  opacity: 0.68;
}
a { color: #1a1815; }
a:hover { color: #6b6558; }

/* Demo video in a CSS-only phone frame */
.shot {
  position: relative;
  width: min(24vw, 244px);
  aspect-ratio: 1080 / 2346;
  max-height: 78vh;
  padding: 6px;                 /* 베젤 두께 */
  background: #1a1815;          /* 폰 바디 (버튼/텍스트 색과 통일) */
  border-radius: 34px;         /* 폰 외곽 라운드 */
  box-shadow: 0 12px 30px rgba(26, 24, 21, 0.18);
  flex: none;
}
.shot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 28px;         /* 안쪽 화면 라운드 (베젤보다 작게) */
}
/* 다이내믹 아일랜드 (가짜 노치) */
.shot::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 12px;
  background: #1a1815;
  border-radius: 8px;
  z-index: 1;
}

/* Mobile: stack, shrink video so the button stays on first screen */
@media (max-width: 880px) {
  .row { flex-direction: column; gap: 34px; }
  .shot { width: min(50vw, 196px); max-height: none; }
  /* Bump type up on mobile — headline drives wordmark (0.72em) + tagline (0.58em) */
  .headline { font-size: 48px; }
  .signup { width: min(100%, 320px); }
  /* 16px+ on the input prevents iOS zoom-on-focus (which would push the button off-screen) */
  .field input { font-size: 17px; }
  .field button { font-size: 17px; }
  .subcopy { font-size: 13.5px; }
}

/* Very short viewports: shrink video further to guarantee button visibility */
@media (max-width: 880px) and (max-height: 720px) {
  .shot { width: min(38vw, 150px); padding: 4px; border-radius: 26px; }
  .shot video { border-radius: 22px; }
  .shot::before { top: 13px; height: 9px; }
  .col { gap: 20px; }
}