@font-face {
  font-family: 'ChurchwardRoundsquare';
  src: url('/fonts/ChurchwardRoundsquareRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CarteBlanche';
  src: url('/fonts/Dkcarteblanche-Dp0m.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Signpainter';
  src: url('/fonts/SignPainterHouseScript.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



:root{ --header-h:20vh; --hero-h:60vh; --max-w:1200px }
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f5f6f8;color:#1f2937}

.site-header{height:var(--header-h);display:flex;align-items:center;justify-content:center;background:transparent;color:inherit;flex-direction: column;}
.site-header h1{font-family:'CarteBlanche',Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:clamp(90px,6vw,56px);margin:0;letter-spacing:2px;margin-top: 10px;line-height: 0.8;}

.hero{height:var(--hero-h);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.wrap{width:100%;display:flex;gap:2rem;align-items:center;margin:20px}

/* Left image: keep square and remove rounding/shadow/padding */
.left{flex:0 0 1;display:flex;align-items:center;justify-content:center}
.left img{width:100%;max-width:600px;aspect-ratio:1/1;object-fit:cover;border-radius:0;box-shadow:none;display:block;padding:0}

/* Right text block: remove rounding and shadow; make text larger */
.right{flex:1;background:rgba(255, 255, 255, 0);padding:2rem;border-radius:0;box-shadow:none}
.right p{margin:0;line-height:1.6;text-align:left;font-size:1.9rem;font-family:'CarteBlanche';color:#000000}

/* Ensure text sits at left edge of its block */
.right .about{margin-left:0}

.subhead {margin: 0%;font-family:'Signpainter';font-size:45px;color: #1f2937;}

.content {width: 100%;height: auto;flex-direction: column;}

@media (max-width:900px){
    .wrap{flex-direction:column}
    .left{width:100%;flex-basis:auto}
    .left img{max-width:320px}
    .right{width:100%}
}
