/* =============================================================================
   A Light From Heaven — shared design system
   Used by every page. Colours are the established ALFH palette and must not
   change; spacing, type scale, radii and motion are the shared system.
   Page-specific backgrounds (sky, rays, motes) stay in each page.
   ============================================================================= */

:root{
  /* ---- brand colours (unchanged ALFH palette) ---- */
  --navy:#16233d; --navy-2:#22355a; --navy-3:#0e1830;
  --gold:#c79b4b; --gold-light:#e4c97e; --gold-pale:#f3dea0; --bronze:#6b4f18; --bronze-light:#8a6410; --amber:#a9781f;
  --ink:#233457; --ink-strong:#1c2a49; --ink-warm:#3a2c08; --ink-list:#243450;
  --on-navy:#ffffff; --on-navy-soft:#bccbe6; --on-navy-softer:#c3d0e8; --on-navy-label:#9fb0d0;
  --on-navy-muted:#8494b4; --on-navy-hint:#7d8bab; --error:#ffbfae;
  --on-gold:#241a06;
  --line-gold:rgba(228,201,126,.28); --line-gold-strong:rgba(228,201,126,.45);
  --field-bg:rgba(9,16,32,.55);

  /* ---- type ---- */
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:'Great Vibes', cursive;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.0625rem;
  --text-lg:1.25rem; --text-xl:1.625rem; --text-2xl:2rem;
  --text-hero:clamp(2.25rem, 1.6rem + 3.4vw, 3.5rem);
  --text-script:clamp(1.625rem, 1.3rem + 1.6vw, 2.125rem);

  /* ---- 4px spacing scale ---- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem; --s-20:5rem; --s-24:6rem;

  /* ---- shape, motion, depth ---- */
  --radius-sm:12px; --radius-md:16px; --radius-lg:28px; --radius-pill:999px;
  --tap:52px;                       /* comfortably above the 44px minimum */
  --measure:34rem;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-card:0 1px 0 rgba(255,255,255,.06) inset, 0 30px 60px -20px rgba(70,48,8,.45), 0 12px 24px -12px rgba(70,48,8,.25);
  --shadow-button:0 8px 20px -6px rgba(199,155,75,.55);
  --shadow-button-hover:0 12px 28px -6px rgba(199,155,75,.65);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;color:var(--navy);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
[hidden]{display:none!important}           /* must beat component display rules */
.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}

/* ---------- typography ---------- */
.eyebrow{font-family:var(--font-script);font-size:var(--text-script);font-weight:400;line-height:1;color:var(--navy)}
.display{font-family:var(--font-display);font-weight:600;font-size:var(--text-hero);
  line-height:1.04;letter-spacing:-.015em;color:var(--navy);text-wrap:balance}
.lede{font-size:var(--text-md);line-height:1.65;color:var(--ink);text-wrap:pretty}
.kicker{font-size:var(--text-xs);font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--bronze)}

/* ---------- navy card ---------- */
.card{position:relative;width:100%;padding:var(--s-8) var(--s-6);text-align:left;
  border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--navy-2) 0%,var(--navy) 100%);
  border:1px solid var(--line-gold);box-shadow:var(--shadow-card);isolation:isolate;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto;height:140px;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 100% at 50% 0%, rgba(228,201,126,.14), transparent 70%)}
@media (min-width:480px){ .card{padding:var(--s-10) var(--s-8)} }
.card__tag{font-family:var(--font-script);font-size:1.5rem;line-height:1;color:var(--gold-light)}
.card__title{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);line-height:1.15;color:var(--on-navy)}
.card__desc{font-size:var(--text-base);line-height:1.6;color:var(--on-navy-soft)}
.pill{display:inline-block;padding:var(--s-1) var(--s-3);border-radius:var(--radius-pill);
  font-size:.6875rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-light);background:rgba(228,201,126,.12);border:1px solid rgba(228,201,126,.36)}

/* ---------- forms ---------- */
.form{display:grid;gap:var(--s-4)}
.fields{display:grid;gap:var(--s-4)}
@media (min-width:480px){ .fields{grid-template-columns:1fr 1.25fr} }
.field{display:grid;gap:var(--s-2);min-width:0}
.field label{font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy-label)}
.field label .optional{font-weight:600;letter-spacing:0;text-transform:none;color:var(--on-navy-hint)}
.input{width:100%;min-height:var(--tap);padding:0 var(--s-4);
  font:inherit;font-size:var(--text-base);color:var(--on-navy);
  background:var(--field-bg);border:1px solid var(--line-gold);border-radius:var(--radius-sm);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.input::placeholder{color:var(--on-navy-hint)}
.input:hover{border-color:var(--line-gold-strong)}
.input:focus-visible{outline:none;border-color:var(--gold-light);box-shadow:0 0 0 4px rgba(228,201,126,.22)}
.input[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 4px rgba(255,191,174,.16)}

.status{min-height:1.4em;font-size:var(--text-sm);text-align:center;color:var(--error)}
.status:empty{display:none}
.fine{font-size:var(--text-sm);color:var(--on-navy-muted);text-align:center}

/* ---------- buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  width:100%;min-height:var(--tap);padding:0 var(--s-6);
  font:inherit;font-size:var(--text-md);font-weight:800;letter-spacing:.01em;color:var(--on-gold);text-decoration:none;
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  border:0;border-radius:var(--radius-pill);box-shadow:var(--shadow-button);cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease)}
.button:hover{transform:translateY(-1px);box-shadow:var(--shadow-button-hover)}
.button:active{transform:translateY(0) scale(.99)}
.button:focus-visible{outline:3px solid var(--on-navy);outline-offset:3px}
.button[disabled]{cursor:progress;filter:saturate(.6) opacity(.85);transform:none}
.button .arrow{transition:transform .2s var(--ease)}
.button:hover .arrow{transform:translateX(3px)}
.spinner{width:1em;height:1em;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- success state ---------- */
.done{text-align:center}
.done:not([hidden]){animation:rise .5s var(--ease) both}
.seal{width:56px;height:56px;margin:0 auto var(--s-4);display:grid;place-items:center;border-radius:50%;
  color:var(--on-gold);background:radial-gradient(circle at 50% 35%,var(--gold-pale),var(--gold));
  box-shadow:0 0 0 6px rgba(228,201,126,.14)}
.done h2{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);line-height:1.15;color:var(--on-navy)}
.done h2:focus{outline:none}
.done p{margin:var(--s-3) auto 0;max-width:34ch;color:var(--on-navy-soft)}

/* ---------- footer link + signature ---------- */
.enter{display:inline-block;padding:var(--s-2);line-height:1.5;text-align:center;text-wrap:balance;
  font-size:var(--text-lg);color:var(--navy);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 85%;
  transition:color .2s var(--ease), background-size .3s var(--ease)}
.enter .script{font-family:var(--font-script);font-size:1.6em;line-height:1;vertical-align:-.08em}
.enter:hover{color:var(--ink-warm);background-size:100% 1px}
.enter:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:6px}
.sig{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);color:var(--ink-strong)}

/* ---------- entrance motion ---------- */
.rise{animation:rise .8s var(--ease) both}
.rise-2{animation-delay:.08s} .rise-3{animation-delay:.16s} .rise-4{animation-delay:.24s}
.rise-5{animation-delay:.34s} .rise-6{animation-delay:.44s} .rise-7{animation-delay:.54s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

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