:root {
  --black: #050505;
  --charcoal: #11100e;
  --soft-black: #171614;
  --stone: #dcd6ce;
  --stone-deep: #9d958a;
  --ink: rgba(10, 9, 8, 0.88);
  --muted: rgba(235, 229, 220, 0.58);
  --muted-strong: rgba(235, 229, 220, 0.78);
  --line: rgba(220, 214, 206, 0.38);
  --gold: #b8a37a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--black);
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--muted);
}

.page-shell {
  min-height: 100vh;
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 22px;
  isolation: isolate;
}

.stone-layer {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 50% 38%, rgba(220, 214, 206, 0.18), transparent 28%),
    radial-gradient(circle at 20% 70%, rgba(184, 163, 122, 0.10), transparent 28%),
    linear-gradient(135deg, #1a1a18 0%, #2a2926 38%, #171715 68%, #080808 100%);
}

.stone-layer::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(255,255,255,0.035) 19%, transparent 20% 42%, rgba(255,255,255,0.025) 43%, transparent 44% 100%),
    repeating-linear-gradient(148deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(24deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 18px);
  opacity: 0.45;
  transform: rotate(-4deg) scale(1.12);
  filter: blur(0.15px);
}

.stone-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.07), transparent 25%),
    radial-gradient(circle at 50% 58%, rgba(255,255,255,0.035), transparent 30%),
    linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.72));
}

.veil-layer {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to right, rgba(0,0,0,0.52), rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.52)),
    linear-gradient(to bottom, rgba(0,0,0,0.36), rgba(0,0,0,0.06) 44%, rgba(0,0,0,0.64));
}

.content {
  width: min(760px, 100%);
  text-align: center;
  transform: translateY(-1vh);
}

.eyebrow,
.signup-title,
.footer-note {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 68px;
  font-size: clamp(0.68rem, 1vw, 0.78rem);
  color: rgba(184, 163, 122, 0.32);
}

.brand {
  margin: 0;
  display: grid;
  gap: 2px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(16, 15, 13, 0.94);
  font-size: clamp(4.2rem, 12vw, 8.2rem);
  text-shadow:
    0 -1px 0 rgba(255,255,255,0.14),
    0 1px 1px rgba(0,0,0,0.95),
    0 14px 32px rgba(0,0,0,0.38);
}

.brand span {
  display: block;
  padding-left: 0.32em;
}

.intention-row {
  width: min(760px, 100%);
  margin: 48px auto 62px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(22px, 5vw, 48px);
}

.intention-row .line {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
}

.intention-row p {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(0.86rem, 1.6vw, 1.05rem);
  letter-spacing: 0.28em;
  color: var(--muted-strong);
  white-space: nowrap;
}

.signup-title {
  margin: 0 0 30px;
  font-size: clamp(0.82rem, 1.4vw, 1rem);
  color: var(--muted-strong);
}

.signup-form {
  width: min(520px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 190px;
  border: 1px solid rgba(220, 214, 206, 0.16);
  background: rgba(5, 5, 5, 0.16);
  box-shadow: 0 28px 68px rgba(0,0,0,0.24);
  backdrop-filter: blur(5px);
}

.signup-form input,
.signup-form button {
  height: 76px;
  border: 0;
  border-radius: 0;
  outline: none;
}

.signup-form input {
  width: 100%;
  padding: 0 28px;
  background: rgba(220, 214, 206, 0.25);
  color: rgba(245, 239, 230, 0.88);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.08rem;
  letter-spacing: 0.10em;
}

.signup-form input::placeholder {
  color: rgba(28, 25, 22, 0.50);
}

.signup-form input:focus {
  background: rgba(220, 214, 206, 0.32);
}

.signup-form button {
  cursor: pointer;
  background: rgba(8, 8, 7, 0.94);
  color: rgba(238, 232, 222, 0.88);
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  transition: background 260ms ease, color 260ms ease, opacity 260ms ease;
}

.signup-form button:hover {
  background: rgba(18, 17, 15, 0.98);
  color: #fff;
}

.footer-note {
  margin: 120px 0 0;
  font-size: clamp(0.66rem, 1vw, 0.76rem);
  color: rgba(184, 163, 122, 0.20);
}

.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 (max-width: 720px) {
  /* ── Mobile: greige stone background ── */
  html,
  body {
    background: #cfc7bc;
  }

  .page-shell {
    min-height: 100svh;
    overflow: hidden;
  }

  .hero {
    min-height: 100svh;
    align-items: center;
    padding: 72px 24px 36px;
  }

  /* Warm greige stone — replaces the near-black desktop gradient */
  .stone-layer {
    background:
      radial-gradient(circle at 48% 36%, rgba(245, 240, 232, 0.55), transparent 42%),
      radial-gradient(circle at 18% 72%, rgba(184, 163, 122, 0.22), transparent 36%),
      radial-gradient(circle at 80% 20%, rgba(200, 190, 178, 0.30), transparent 32%),
      linear-gradient(148deg, #dcd6ce 0%, #cfc7bc 38%, #c4bbb0 68%, #beb5aa 100%);
  }

  /* Stone texture on greige, not black */
  .stone-layer::before {
    background:
      linear-gradient(110deg, transparent 0 18%, rgba(255,255,255,0.06) 19%, transparent 20% 42%, rgba(255,255,255,0.04) 43%, transparent 44% 100%),
      repeating-linear-gradient(148deg, rgba(100,90,75,0.06) 0 1px, transparent 1px 15px),
      repeating-linear-gradient(24deg, rgba(80,70,58,0.05) 0 1px, transparent 1px 18px);
    opacity: 0.7;
  }

  /* Soft warm vignette, not black */
  .stone-layer::after {
    background:
      radial-gradient(circle at 50% 18%, rgba(255,255,255,0.12), transparent 28%),
      linear-gradient(to bottom, rgba(160,145,128,0.10), rgba(100,85,70,0.28));
  }

  /* Soft dark veil — much lighter than desktop */
  .veil-layer {
    background:
      linear-gradient(to right, rgba(50,42,35,0.18), rgba(50,42,35,0.04) 50%, rgba(50,42,35,0.18)),
      linear-gradient(to bottom, rgba(30,24,18,0.12), rgba(30,24,18,0.02) 44%, rgba(30,24,18,0.22));
  }

  .content {
    width: 100%;
    max-width: 100%;
    transform: none;
    overflow: visible;
  }

  .eyebrow {
    margin-bottom: 40px;
    color: rgba(60, 50, 38, 0.55);
  }

  /* ── Logo: fully visible, centered, no crop ── */
  .brand {
    display: block;
    width: 100%;
    max-width: 92vw;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(42px, 14vw, 72px);
    letter-spacing: 0.18em;
    line-height: 1.0;
    transform: none;
    overflow: visible;
    /* Warm dark color visible on greige stone */
    color: rgba(28, 22, 16, 0.88);
    text-shadow:
      0 -1px 0 rgba(255,255,255,0.18),
      0 1px 2px rgba(80,65,45,0.35),
      0 6px 20px rgba(60,48,32,0.18);
  }

  .brand span {
    display: block;
    padding-left: 0;
    text-align: center;
  }

  .intention-row {
    margin: 32px auto 44px;
    gap: 16px;
    max-width: 92vw;
  }

  .intention-row .line {
    background: linear-gradient(to right, transparent, rgba(80,68,52,0.30), transparent);
  }

  .intention-row p {
    font-size: 0.82rem;
    letter-spacing: 0.22em;
    color: rgba(40, 32, 22, 0.72);
    white-space: nowrap;
  }

  .signup-title {
    margin-bottom: 20px;
    font-size: 0.82rem;
    letter-spacing: 0.38em;
    color: rgba(40, 32, 22, 0.65);
  }

  /* ── Email form: full width, centered, warm ── */
  .signup-form {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    grid-template-columns: 1fr auto;
    background: rgba(220, 213, 203, 0.38);
    border: 1px solid rgba(100, 85, 65, 0.22);
    box-shadow: 0 8px 32px rgba(60,48,32,0.14);
  }

  .signup-form input,
  .signup-form button {
    height: 52px;
  }

  .signup-form input {
    padding: 0 16px;
    font-size: 0.95rem;
    background: rgba(225, 218, 208, 0.55);
    color: rgba(28, 22, 16, 0.82);
  }

  .signup-form input::placeholder {
    color: rgba(60, 50, 38, 0.42);
  }

  .signup-form input:focus {
    background: rgba(230, 224, 215, 0.70);
  }

  .signup-form button {
    width: 80px;
    background: rgba(20, 16, 12, 0.88);
    color: rgba(235, 228, 218, 0.90);
    font-size: 0.78rem;
    letter-spacing: 0.32em;
  }

  .signup-form button:hover {
    background: rgba(10, 8, 6, 0.96);
    color: #fff;
  }

  /* ── Footer note: readable, aligned, not cut off ── */
  .footer-note {
    margin-top: 36px;
    padding: 0;
    font-size: 0.62rem;
    letter-spacing: 0.34em;
    line-height: 1.6;
    color: rgba(50, 40, 28, 0.38);
  }
}

@media (max-width: 430px) {
  .brand {
    font-size: clamp(42px, 13vw, 64px);
    letter-spacing: 0.16em;
  }

  .intention-row {
    gap: 12px;
  }

  .intention-row p {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }

  .signup-form {
    max-width: 100%;
  }
}