/* ============================================================
   THE BEAUMONT — The Application
   One question per screen. An invitation being answered.
   ============================================================ */

.apply-body {
  min-height: 100dvh;
  position: relative;
  overflow: hidden; /* screens are stacked; page itself doesn't scroll */
}

/* Ambient amber pool that deepens as the application progresses */
.apply-body::before {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(70% 60% at 50% 118%,
              rgba(230,184,118, calc(0.05 + 0.16 * var(--p, 0))) 0%,
              transparent 60%);
  pointer-events: none; z-index: 0;
  transition: background 800ms var(--ease);
}
/* Faint record grooves — the hero motif, quiet */
.apply-body::after {
  content: "";
  position: fixed;
  right: -28vmax; bottom: -28vmax;
  width: 78vmax; height: 78vmax;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center,
      rgba(201,134,47,0.05) 0 1px,
      transparent 1px 9px);
  opacity: 0.5;
  pointer-events: none; z-index: 0;
  animation: grooves 90s linear infinite;
}
@keyframes grooves { to { transform: rotate(360deg); } }

/* ---------------- Top bar ---------------- */
.apply-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1rem, 3vh, 1.6rem) clamp(1.25rem, 5vw, 3rem);
  padding-top: max(clamp(1rem,3vh,1.6rem), env(safe-area-inset-top));
}
.apply-top__home .display {
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  color: var(--cream-dim);
  letter-spacing: 0.06em;
  transition: color 300ms var(--ease), text-shadow 400ms var(--ease);
}
.apply-top__home:hover .display,
.apply-top__home:focus-visible .display {
  color: var(--cream); text-shadow: 0 0 30px rgba(230,184,118,0.4);
}
.apply-top__step { color: var(--brass); font-size: 0.72rem; }
.apply-top__step .of { color: var(--cream-faint); }
.apply-top__step.is-hidden { opacity: 0; }
.apply-top__step { transition: opacity 400ms var(--ease); }

/* progress hairline under the bar */
.apply-top::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, transparent, var(--brass) 40%, var(--amber));
  box-shadow: 0 0 18px -2px var(--amber);
  transition: width 700ms var(--ease);
}

/* ---------------- Screens ---------------- */
.application { position: relative; z-index: 1; min-height: 100dvh; }

.screens { position: relative; min-height: 100dvh; }

.screen {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding:
    calc(env(safe-area-inset-top) + 6rem)
    clamp(1.5rem, 6vw, 4rem)
    calc(env(safe-area-inset-bottom) + 3rem);
  opacity: 0; visibility: hidden;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease),
              filter 720ms var(--ease), visibility 720ms var(--ease);
  pointer-events: none;
}
.screen.is-active {
  opacity: 1; visibility: visible; transform: none; filter: none;
  pointer-events: auto;
}
/* backward navigation flips the direction */
.screens[data-dir="back"] .screen { transform: translateY(-26px); }
.screens[data-dir="back"] .screen.is-active { transform: none; }
.screen[hidden] { display: none; }

.screen__inner {
  position: relative;
  width: 100%;
  max-width: 42rem;
}

/* Giant ghost roman numeral behind each question */
.numeral {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -58%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(12rem, 34vw, 30rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,134,47,0.16);
  text-stroke: 1px rgba(201,134,47,0.16);
  pointer-events: none;
  z-index: -1;
  user-select: none;
}

.screen__q {
  display: block;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.04;
  color: var(--cream);
  margin-bottom: var(--s-4);
  max-width: 20ch;
}
.screen__lede {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  line-height: 1.85;
  color: var(--cream-dim);
  max-width: 46ch;
  margin-bottom: var(--s-5);
}
.screen__hint {
  font-family: var(--font-body);
  color: var(--cream-faint);
  font-size: 0.9rem;
  margin-top: -0.8rem; margin-bottom: var(--s-3);
}

/* ---------------- Fields ---------------- */
.field {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.5;
  padding: 0.55em 0.1em;
  caret-color: var(--amber);
  transition: border-color 360ms var(--ease), box-shadow 480ms var(--ease);
}
.field::placeholder { color: var(--cream-faint); opacity: 0.7; }
.field:focus {
  outline: none;
  border-bottom-color: var(--amber);
  box-shadow: 0 24px 46px -30px rgba(230,184,118,0.7);
}
.field--area { resize: none; line-height: 1.6; min-height: 3.2em; }
.field--opt { margin-top: var(--s-3); font-size: clamp(1rem, 2vw, 1.2rem); }

.field-error {
  color: #e08a6a;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  margin-top: 0.7rem;
}
.field-error[hidden] { display: none; }

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

/* ---------------- Choices ---------------- */
.choices { display: grid; gap: 0.7rem; margin-top: var(--s-2); }
.choice {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05em 1.3em;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  cursor: pointer;
  color: var(--cream-dim);
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  transition: border-color 300ms var(--ease), background 300ms var(--ease),
              color 300ms var(--ease), box-shadow 400ms var(--ease), transform 300ms var(--ease);
  min-height: 44px;
}
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice::before {
  content: "";
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--brass);
  flex: 0 0 auto;
  transition: background 300ms var(--ease), box-shadow 300ms var(--ease);
}
.choice:hover { border-color: rgba(230,184,118,0.55); color: var(--cream); }
.choice.is-selected,
.choice:has(input:checked) {
  border-color: var(--amber);
  background: rgba(230,184,118,0.08);
  color: var(--cream);
  box-shadow: 0 0 34px -12px rgba(230,184,118,0.55);
}
.choice.is-selected::before,
.choice:has(input:checked)::before {
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
}
.choice:has(input:focus-visible),
.choice.is-focus { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------------- Actions ---------------- */
.screen__actions {
  display: flex; align-items: center; gap: 1.4rem;
  margin-top: var(--s-5);
  flex-wrap: wrap;
}
.ghost {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.76rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--cream-faint);
  padding: 0.6em 0.2em;
  transition: color 300ms var(--ease);
  min-height: 44px;
}
.ghost:hover, .ghost:focus-visible { color: var(--cream); }
.knock--seal { font-size: 0.8rem; }

/* Privacy reassurance beside the seal */
.privacy-note {
  margin-top: var(--s-4);
  font-size: 0.68rem; letter-spacing: 0.12em; line-height: 1.7;
  text-transform: none;
  color: var(--cream-faint); opacity: 0.75;
  max-width: 34rem;
}
.privacy-note a { color: var(--amber); text-decoration: none; white-space: nowrap; }
.privacy-note a:hover, .privacy-note a:focus-visible { text-decoration: underline; }

/* Enter hint */
.screen__actions::after {
  content: "";
}

/* ---------------- Wax seal ---------------- */
.screen--seal { place-items: center; gap: 1.6rem; }
/* photoreal wax seal image, stamped */
.seal-stamp {
  width: clamp(140px, 30vw, 200px);
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 46px rgba(0,0,0,0.6));
}
/* pressing animation — drops from above, over-shoots, settles */
.screen--seal.is-active .seal-stamp { animation: seal-press 920ms var(--ease) both; }
@keyframes seal-press {
  0%   { transform: translateY(-52px) scale(1.7) rotate(-9deg); opacity: 0; filter: blur(6px); }
  55%  { opacity: 1; filter: blur(0); }
  70%  { transform: translateY(5px) scale(0.92) rotate(1.5deg); }
  85%  { transform: translateY(0) scale(1.04) rotate(0); }
  100% { transform: none; opacity: 1; }
}
.seal-note { color: var(--brass); }

.seal-stamp--set { width: clamp(78px, 16vw, 104px); margin-bottom: var(--s-3); }

.screen--done .screen__q { margin-top: 0; }

/* ---------------- Submit error ---------------- */
.submit-error {
  position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%);
  z-index: 40;
  background: rgba(74,26,30,0.94);
  border: 1px solid #e08a6a;
  color: var(--cream);
  font-family: var(--font-body); font-size: 0.9rem;
  padding: 0.9em 1.3em; border-radius: 10px;
  max-width: min(92vw, 34rem);
  box-shadow: 0 18px 50px -18px rgba(0,0,0,0.8);
}
.submit-error[hidden] { display: none; }

/* screen reader live region */
.sr-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------- No-JS fallback: show a scrollable form ---------------- */
.no-js.apply-body { overflow: auto; }
.no-js .screens { min-height: 0; }
.no-js .screen {
  position: static; opacity: 1; visibility: visible;
  transform: none; filter: none; pointer-events: auto;
  min-height: auto; place-items: start;
  padding: 3rem clamp(1.5rem,6vw,4rem);
  border-bottom: 1px solid var(--hairline);
}
.no-js .screen[hidden] { display: grid; }
.no-js .numeral { position: static; transform: none; font-size: 4rem; -webkit-text-stroke: 1px rgba(201,134,47,0.3); }
.no-js .screen--seal, .no-js .screen--done { display: none; }
.no-js .apply-body::after { display: none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 560px) {
  .screen { padding-top: calc(env(safe-area-inset-top) + 5rem); }
  .screen__actions { gap: 1rem; }
  .numeral { transform: translate(-50%, -62%); }
}
@media (max-height: 620px) {
  .numeral { font-size: clamp(8rem, 26vw, 16rem); }
  .screen__q { margin-bottom: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .apply-body::after { animation: none; }
  .screen { transition: opacity 200ms linear; transform: none; filter: none; }
  .screen--seal.is-active .seal-stamp { animation: none; }
}