:root{--brand:#7a3e00;--accent:#b75b12;}
    body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#222;}
    a{color:var(--accent)} .container{max-width:1100px;margin:auto;padding:1rem}
    header{border-bottom:1px solid #eee}
    .nav{display:flex;gap:.75rem;flex-wrap:wrap}
    .nav a{padding:.5rem .75rem;border-radius:.5rem;text-decoration:none}
    .cta{background:var(--accent);color:#fff}
	
    .hero{display:grid;gap:1rem;padding:1rem 0}
    @media(min-width:720px){.hero{grid-template-columns:2fr 1fr}}
	
	/* Make the hero <figure> tidy and the <img> responsive */
	.hero figure { margin: 0; }
	.hero img {
	 max-width: 100%;
	 height: auto;
	 display: block;
	}

	/* Phone tweaks: cap image height so it doesn’t dominate */
	@media (max-width: 600px) {
		.hero img {
			max-height: 45vh;   /* try 40–55vh to taste */
			width: auto;        /* respect the height cap */
			object-fit: contain;
			margin: 0 auto;     /* center if narrower than container */
		}
		.hero {               /* optional: trim vertical padding on phones */
			padding-top: .5rem;
			padding-bottom: .5rem;
		}
	}

    footer{border-top:1px solid #eee;margin-top:2rem;padding:1rem 0;font-size:.95rem}
    .sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
    :focus-visible{outline:3px solid #000;outline-offset:2px}

    /* Show images centered and resizable by percentage */
	.photo-wrapper {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	#imgBackground {
		max-width: 60%;    /* <-- change % smaller/larger */
		height: auto;
		display: block;
		border-radius: .5rem;
	}
	
	@media (max-width: 600px) {
		#imgBackground {
			max-width: 100%;
			max-height: 50vh;
			object-fit: contain;
		}
	}

.site-logo {
  height: 12vw;    /* grows/shrinks automatically */
  max-height: 80px;
  min-height: 40px;
  width: auto;
}

/* Quote box styling */
.quote-wrapper {
  text-align: center;
  width: 100%;
}

.quote-frame {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid black;
  /* border: 2px solid var(--brand);   /* thicker temple-colored border */
  border-radius: 0.5rem;
  /* background: #fffef8;              /* soft background */
  padding: 0.75rem 1 rem;				/* adds breathing room */
  margin: 0 auto 1.5rem auto 			/* spacing below box */
}

/* Center quote text & improve spacing */
#quote-text {
  display: inline-block;
  font-size: 1.15rem;
  line-height: 1.45;
  text-align: center;
}

#imgBackground {
  opacity: 1;
  /* transition: opacity 0.7s ease-in; */
}

#imgBackground.fade-in {
  opacity: 1;
}