/* ==========================================================================
   Request prayer (prayer.html). Night palette: a quiet opening with window
   light, folded hands in an arch beside Philippians 4:6, then the ivory
   form panel. Motion is in assets/js/prayer.js; without it (or with reduced
   motion) everything below is a still, complete page.
   ========================================================================== */

/* ---------- Opening ---------- */

.pr-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--header-h) + 4rem) clamp(4rem, 12vh, 8rem);
  background: var(--midnight);
  color: var(--ivory);
}

/* Soft light falling from a high window at the upper right */
.pr-hero__light {
  position: absolute;
  inset: -10% -10% 0 auto;
  width: 75%;
  pointer-events: none;
  background:
    radial-gradient(45% 40% at 78% 6%, rgba(246, 214, 160, 0.3), rgba(246, 214, 160, 0) 70%),
    linear-gradient(116deg, rgba(230, 166, 79, 0) 38%, rgba(243, 217, 177, 0.1) 52%, rgba(230, 166, 79, 0) 66%),
    radial-gradient(70% 60% at 70% 30%, rgba(105, 45, 133, 0.45), rgba(105, 45, 133, 0) 75%);
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}

.pr-hero__inner { position: relative; }

.pr-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 clamp(1.5rem, 4vh, 2.5rem);
  font: 500 var(--step-0)/1 var(--sans);
  letter-spacing: 0.02em;
  color: var(--gold);
}
.pr-label::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; }

.pr-headline {
  max-width: 11.5ch;
  margin: 0;
  font: 400 clamp(3.2rem, 1rem + 6.6vw, 8.6rem)/0.98 var(--serif);
  letter-spacing: -0.035em;
  color: var(--ivory);
  text-wrap: balance;
}
/* Each word rises from its own mask */
.pr-w { display: inline-block; overflow: hidden; padding-block: 0.04em 0.12em; margin-block: -0.04em -0.12em; vertical-align: top; }
.pr-w > span { display: inline-block; }

.pr-lede {
  max-width: 30ch;
  margin: clamp(1.75rem, 4vh, 2.75rem) 0 0;
  font: italic 400 var(--step-2)/1.3 var(--serif);
  color: var(--ivory-soft);
}
.pr-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.25rem;
  font: 500 var(--step--1)/1 var(--sans);
  letter-spacing: 0.02em;
  color: var(--gold);
  text-decoration: none;
}
.pr-cue::after { content: ""; width: 2.5rem; height: 1px; background: currentColor; transform-origin: left; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.pr-cue:hover::after, .pr-cue:focus-visible::after { transform: scaleX(1.6); }

.pr-pending :is(.pr-headline, .pr-lede, .pr-cue, .pr-label) { visibility: hidden; }

/* ---------- Folded hands and scripture ---------- */

.pr-quiet {
  position: relative;
  padding-block: clamp(3rem, 6vw, 6rem) clamp(5rem, 9vw, 9rem);
  background: linear-gradient(180deg, var(--midnight) 0, var(--aubergine) 55%, var(--midnight) 100%);
  color: var(--ivory);
}
.pr-quiet__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3rem var(--gutter);
  align-items: center;
}

.pr-quiet { z-index: 1; }
/* On desktop the arch rises into the opening's lower right, under the window light */
.pr-photo {
  position: relative;
  grid-column: 8 / span 5;
  grid-row: 1;
  margin: calc(-1 * clamp(14rem, 40vh, 26rem)) 0 0;
  aspect-ratio: 4 / 5;
}
/* the site's arch, with a fine gold outline standing just off it */
.pr-photo::before {
  content: "";
  position: absolute;
  inset: -0.9rem -0.9rem 0;
  border: 1px solid var(--hairline-gold);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.pr-photo__reveal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  /* the base of the picture dissolves into the plum */
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  /* until the photograph arrives, warm light in the arch */
  background:
    radial-gradient(70% 45% at 50% 0%, rgba(243, 217, 177, 0.22), rgba(243, 217, 177, 0) 75%),
    linear-gradient(180deg, #4a1c58, #2b0d38);
}
.pr-photo img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
}
.pr-photo.is-awaiting img { visibility: hidden; }
.pr-photo__note { display: none; }
.is-local .pr-photo.is-awaiting .pr-photo__reveal { outline: 1px dashed rgba(230, 166, 79, 0.55); outline-offset: -1.25rem; }
.is-local .pr-photo.is-awaiting .pr-photo__note {
  display: block;
  position: absolute;
  left: 1.5rem; right: 1.5rem; bottom: 2rem;
  font: 400 0.8rem/1.45 var(--sans);
  text-align: center;
  color: rgba(230, 166, 79, 0.9);
}

.pr-verse { grid-column: 1 / span 6; grid-row: 1; margin: 0; padding-top: clamp(4rem, 12vh, 9rem); align-self: start; }
.pr-verse blockquote { margin: 0; }
.pr-verse p {
  margin: 0;
  font: italic 400 clamp(1.8rem, 1rem + 2.3vw, 3.4rem)/1.22 var(--serif);
  letter-spacing: -0.015em;
  color: var(--ivory);
  text-indent: -0.42em;  /* hang the opening quotation mark */
}
.js-motion .pr-verse p .w { opacity: 0.28; }
.pr-verse figcaption { margin-top: clamp(1.75rem, 3vw, 2.5rem); font: 400 var(--step-0)/1.4 var(--sans); color: var(--ivory-soft); }
.pr-verse figcaption::before { content: ""; display: inline-block; width: 2.5rem; height: 1px; margin-right: 1rem; vertical-align: middle; background: var(--gold); }
.pr-verse cite { font-style: normal; font-weight: 500; color: var(--gold); }

/* ---------- The form panel ---------- */

.pr-form .form-layout { row-gap: clamp(2.5rem, 5vw, 4rem); }
.pr-form__intro { grid-column: 1 / -1; max-width: 40rem; }
.pr-form__intro h2 { margin: 0 0 1rem; font: 400 var(--step-4)/1 var(--serif); letter-spacing: -0.03em; }
.pr-form__intro p { margin: 0; font-size: var(--step-1); line-height: 1.5; }
.pr-form .form-layout__aside { grid-row: 2; }
.pr-form .form-layout__main { grid-row: 2; }

.pr-form .privacy h2 { font: 400 var(--step-2)/1.1 var(--serif); margin-bottom: 1rem; }
.pr-form .privacy p { font-size: var(--step-0); line-height: 1.6; }
.privacy__urgent { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

.pr-notice {
  margin: 0 0 2.25rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid rgba(143, 90, 20, 0.35);
  border-radius: 1rem;
  background: rgba(230, 166, 79, 0.1);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink);
}
[data-palette="night"] .pr-form .pr-notice { color: var(--ink); }
.pr-notice[hidden] { display: none; }
.pr-notice strong { font-weight: 600; }
.pr-notice a { color: var(--gold-deep); text-underline-offset: 0.2em; overflow-wrap: anywhere; }

/* Calm, generous fields */
.pr-form .form { gap: 2rem; }
.pr-form .field { gap: 0.6rem; }
.pr-form .field label { font: 500 var(--step-0)/1.3 var(--sans); color: var(--ink); }
.pr-form .field input,
.pr-form .field textarea {
  padding: 1.05rem 1.2rem;
  border: 1px solid rgba(42, 13, 55, 0.2);
  border-radius: 0.95rem;
  background: #fffdf8;
  font-size: var(--step-0);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.pr-form .field textarea { min-height: 15rem; line-height: 1.6; }
.pr-form .field input:hover,
.pr-form .field textarea:hover { border-color: rgba(42, 13, 55, 0.36); }
[data-palette="night"] .pr-form .field input:focus,
[data-palette="night"] .pr-form .field textarea:focus {
  border-color: var(--gold-deep);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(230, 166, 79, 0.24);
}
.pr-form .field[data-invalid] input,
.pr-form .field[data-invalid] textarea { border-color: #9b2c3f; }
.pr-form .btn[type="submit"] { min-width: 15rem; }

/* ---------- Phones and tablets ---------- */

@media (max-width: 960px) {
  .pr-hero { align-items: center; min-height: 88svh; }
  .pr-hero__light { width: 100%; }
  .pr-quiet__grid { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .pr-photo { grid-column: 1; grid-row: auto; width: min(100%, 26rem); margin: 0 auto; }
  .pr-verse { grid-column: 1; grid-row: auto; padding-top: 0; }
  .pr-form .form-layout__aside,
  .pr-form .form-layout__main { grid-row: auto; }
  .pr-form .form-layout__aside { order: 2; }
  .pr-form .btn[type="submit"] { width: 100%; }
}