@font-face{font-family:"Pinyon Script";src:url(fonts/pinyon-script-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Lato;src:url(fonts/lato-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Lato;src:url(fonts/lato-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --teal:#1F4A4F;       /* dark teal */
  --teal-deep:#173A3E;
  --olive:#5A6620;      /* olive green, text-safe on cream */
  --olive-soft:#8A9645; /* decorative only */
  --blush:#F4DFDA;      /* blush pink */
  --blush-deep:#E8C4BC;
  --cream:#FBF6F3;
  --ink:#2A2F2E;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:Lato,"Helvetica Neue",Arial,sans-serif;
  --script:"Pinyon Script","Snell Roundhand","Apple Chancery","Segoe Script",cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-999px;top:0;background:var(--teal);color:#fff;padding:.75rem 1rem;z-index:10}
.skip:focus{left:0}

/* HERO */
.hero{position:relative;height:clamp(260px,42vw,460px);overflow:visible}
.hero-bg{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,74,79,.38),rgba(31,74,79,.12))}
.portrait{position:absolute;left:50%;bottom:0;transform:translate(-50%,42%);width:clamp(190px,26vw,300px);aspect-ratio:1/1;object-fit:cover;object-position:center 22%;border:6px solid var(--cream);box-shadow:0 14px 34px rgba(23,58,62,.28);border-radius:4px;background:var(--blush)}

/* A + B */
.intro{text-align:center;padding:calc(clamp(190px,26vw,300px)*.42 + 1.5rem) 1.25rem 3.25rem;max-width:44rem;margin:0 auto}
.name{font-family:var(--script);font-weight:400;font-size:clamp(3.4rem,10vw,5.75rem);line-height:1.15;color:var(--teal);margin:.15em 0 .1em}
.pillars{font-family:var(--sans);font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--olive);font-size:clamp(.9rem,2.4vw,1.1rem);margin:0 0 1.25rem;padding-left:.32em}
.tagline{font-family:var(--serif);font-size:clamp(1.4rem,3.2vw,1.85rem);line-height:1.4;color:var(--teal);margin:0}

/* C + D */
.story{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,5vw,4rem);width:85%;max-width:none;margin:0 auto;padding:1rem 0 4.5rem;align-items:start}
.story-text p{margin:0 0 1.25rem;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.story-side img{width:100%;border-radius:3px;aspect-ratio:3/4;object-fit:cover}

/* Buttons */
.btn{display:inline-block;font:700 .95rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;background:var(--blush);color:var(--teal-deep);border:2px solid var(--blush);padding:1rem 1.75rem;border-radius:2px;cursor:pointer;text-decoration:none;min-height:48px;transition:background .2s,color .2s}
.btn:hover{background:#fff;border-color:#fff}
.btn-outline{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn-outline:hover{background:var(--teal);color:#fff;border-color:var(--teal)}

/* E */
.contact{display:grid;grid-template-columns:1fr 1fr;background:var(--teal);color:#fff}
.contact-photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%;min-height:420px}
.contact-panel{padding:clamp(2rem,6vw,4.5rem) clamp(1.5rem,5vw,4rem);max-width:36rem}
.contact h2{font-family:var(--serif);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(1.9rem,4.5vw,2.6rem);margin:0 0 .5rem;color:#fff}
.lead{font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.35;margin:0 0 1.75rem;color:var(--blush)}
.field{margin-bottom:1.1rem}
label{display:block;font-size:.9rem;font-weight:700;margin-bottom:.35rem;color:#fff}
.req,.opt{font-weight:400;color:var(--blush)}
input,textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:2px solid transparent;border-radius:2px;padding:.8rem .9rem;min-height:48px}
textarea{resize:vertical}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--blush-deep);box-shadow:0 0 0 2px #7a1f1f}
.status{margin:1rem 0 0;min-height:1.5em;color:var(--blush);font-size:.95rem}
.status a{color:#fff}

:focus-visible{outline:3px solid var(--olive-soft);outline-offset:3px}
.contact :focus-visible{outline-color:var(--blush)}

footer{background:var(--teal-deep);color:var(--blush);text-align:center;padding:1.25rem;font-size:.85rem}
footer p{margin:0}

@media (max-width:820px){
  .story{grid-template-columns:1fr;width:100%;padding-left:1.5rem;padding-right:1.5rem}
  .story-side{max-width:28rem;margin:0 auto}
  .contact{grid-template-columns:1fr}
  .contact-photo img{min-height:0;height:auto;aspect-ratio:1/1;object-position:center 8%}
  .contact-panel{max-width:none}
  .story-text p{text-align:left;hyphens:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Guide callout */
.guide{margin-top:2rem;padding:1.75rem 1.75rem 2rem;background:var(--blush);border-left:6px solid var(--teal);border-radius:2px}
.guide-lead{font-family:var(--serif);font-size:1.4rem;line-height:1.45;color:var(--teal-deep);margin:0 0 1rem;text-align:left!important}
.btn-teal{background:var(--teal);border-color:var(--teal);color:#fff;margin-top:.5rem;text-align:left;line-height:1.3}
.btn-teal:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.btn-sub{display:block;margin-top:.35rem;font-weight:400;letter-spacing:.02em;text-transform:none;font-size:.9rem}


/* Scripture under photo with olive accents */
.verse{margin:1.5rem 0 0;padding:1.25rem 0 0;border-top:5px solid var(--olive)}
.verse blockquote{margin:0}
.verse p{margin:0;font-family:var(--serif);font-style:italic;font-size:1.45rem;line-height:1.45;color:var(--teal)}
.verse figcaption{margin-top:.6rem;font-size:.85rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--olive)}
footer{border-top:6px solid var(--olive)}