@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;
  --portrait-zoom:1.15; /* v9: portrait crop for the 647x821 photo; 1 = no extra zoom */
}
*,*::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 (v7: banner is half its former height) */
.hero{position:relative;height:clamp(130px,21vw,230px);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;overflow:hidden;border:6px solid var(--cream);box-shadow:0 14px 34px rgba(23,58,62,.28);border-radius:4px;background:var(--blush)}
.portrait img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 0%;transform:scale(var(--portrait-zoom));transform-origin:46% 0%}

/* 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 (v8: Bible column is 75% of its v7 width and the verse is larger; the Bible photo stretches so the
   verse reference sits on the same line as the bottom of the blush box) */
.story{display:grid;grid-template-columns:1.87fr 1fr;gap:clamp(1.5rem,5vw,4rem);width:85%;max-width:1320px;margin:0 auto;padding:1rem 0 3rem;align-items:stretch}
.story-text p{margin:0 0 1.25rem;text-align:justify;hyphens:none;-webkit-hyphens:none} /* v12: no word is ever hyphenated; words wrap whole to the next line */
.story-side{display:flex;flex-direction:column;min-width:0;width:75%;justify-self:end}
.story-side img{width:100%;flex:1 1 0;min-height:240px;border-radius:3px;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 (v10): photo left, bordered panel with compact underline fields, like Jody's example */
.contact{display:grid;grid-template-columns:clamp(220px,22vw,300px) minmax(0,40rem);gap:clamp(1.5rem,5vw,4rem);justify-content:center;align-items:stretch;padding:clamp(2rem,4vw,3.25rem) clamp(1.5rem,5vw,4rem);background:var(--teal);color:#fff}
.contact-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;border-radius:3px}
.contact-panel{min-width:0}
.contact h2{font-family:var(--serif);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(2rem,4.5vw,3rem);line-height:1.15;margin:0 0 .35rem;color:#fff}
.lead{font-family:var(--serif);font-style:italic;font-size:1.4rem;line-height:1.35;margin:0 0 1.25rem;color:var(--blush)}
.cform{border:1px solid rgba(244,223,218,.5);padding:1.25rem 1.75rem 1.5rem}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:0 1.75rem}
.field{margin-bottom:.9rem}
label{display:block;font-size:1rem;font-weight:700;margin-bottom:.3rem;color:#fff}
.req,.opt{font-weight:400;font-size:.9rem;color:var(--blush)}
input,textarea{width:100%;font:inherit;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(244,223,218,.55);border-bottom:2px solid var(--blush);border-radius:2px;padding:.45rem .7rem;min-height:44px}
textarea{resize:vertical;min-height:5rem}
input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s ease-out 0s}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-bottom-color:#ff9c8a;box-shadow:0 2px 0 #ff9c8a}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.25rem;margin-top:.5rem}
.status{margin:0;min-height:1.5em;flex:1 1 12rem;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 (v9): banner photo echoed under a deep teal tint, mirroring the header */
footer{position:relative;overflow:hidden;background:var(--teal-deep);color:var(--blush);text-align:center;font-size:.85rem;border-top:6px solid var(--olive)}
footer p{margin:0}
.f-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 60%}
.f-tint{position:absolute;inset:0;background:rgba(23,58,62,.84)}
.f-in{position:relative;padding:2.5rem 1.25rem 1.5rem}
.f-name{font-family:var(--script);font-size:clamp(2.6rem,6vw,3.4rem);line-height:1.2;color:#fff}
.f-pillars{font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--blush);font-size:.8rem;margin:.25rem 0 1.25rem!important;padding-left:.32em}

@media (min-width:821px) and (max-width:1279px){
  .story{grid-template-columns:1.25fr 1fr;align-items:end}
  .story-side{width:90%}
  .story-side img{flex:none;min-height:0;aspect-ratio:3/4}
}
@media (max-width:820px){
  .story{grid-template-columns:1fr;width:100%;padding-left:1.5rem;padding-right:1.5rem}
  .story-side{max-width:21rem;width:100%;margin:0 auto}
  .story-side img{flex:none;min-height:0;aspect-ratio:3/4}
  .contact{grid-template-columns:1fr}
  .contact-photo{width:50%;max-width:220px;margin:0 auto}
  .contact-photo img{height:auto}
  .cform{padding:1.25rem 1.25rem 1.5rem}
  .cform .row{grid-template-columns:1fr}
  .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.9rem;line-height:1.45;color:var(--teal)}
.verse figcaption{margin-top:.6rem;line-height:.75;font-size:.85rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--olive)}

/* v8: verse size steps down on narrower screens (must stay after the base .verse rules) */
@media (min-width:821px) and (max-width:1279px){.verse p{font-size:1.6rem}}
@media (max-width:820px){.verse p{font-size:1.6rem}}

/* v12: without hyphenation, justified text gets loose gaps in the narrow tablet column; left-align there (desktop stays justified) */
@media (min-width:821px) and (max-width:1000px){.story-text p{text-align:left}}