/* Load EB Garamond from Google Fonts for consistent Garamond rendering */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600;700&display=swap');

.site-head { background-color: rgb(229, 193, 245); padding: 8px; display:flex; align-items:center; gap:12px; }
.site-head, body { font-family: 'EB Garamond', Garamond, 'Times New Roman', serif; }
.logo { width:150px; height:150px; object-fit:cover; }

/* Center the site title within the header */
.site-head { position: relative; }
.site-title { position: absolute; left: 50%; transform: translateX(-50%); top: 50%; transform: translate(-50%, -50%); z-index: 1; }

@media (max-width: 700px) {
	.site-title { position: static; transform: none; margin-top: 8px; }
}

/* Site title sizing */
.site-title { font-size: 2.25rem; line-height:1; font-weight:700; }

/* Align header actions (Order button) to the right */
.header-actions { margin-left: auto; display:flex; gap:8px; align-items:center; }

/* Style for current page label (non-link) */
.nav-current { font-weight:600; color: inherit; }

/* Button used for primary actions */
.btn { background: #000; color: #fff; padding: 8px 12px; border-radius: 6px; text-decoration: none; display: inline-block; font-weight:600; }
.btn:hover { opacity: 0.9; }

/* Focus styles for accessibility */
.btn:focus { outline: 3px solid rgba(0,0,0,0.2); outline-offset: 2px; }

/* Centered, larger header title used on portfolio page */
.header-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 1.8rem; font-weight:700; }

/* Portfolio image grid: 3 columns x 2 rows, centered and larger images */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 20px auto 0; max-width: 1080px; }
.portfolio-grid img { width: 100%; height: 380px; object-fit: cover; border-radius: 8px; display:block; }

/* Responsive: stack to single column on small screens */
@media (max-width: 700px) {
	.portfolio-grid { grid-template-columns: 1fr; max-width: 360px; gap: 12px; }
	.portfolio-grid img { height: 260px; }
}

/* Centered hero/body text used on index page */
.hero { max-width: 1100px; margin: 48px auto; display:flex; gap:32px; align-items:center; }
.hero-image { width: 52%; height: 480px; object-fit: cover; border-radius: 8px; }
.hero-text { width: 48%; text-align: left; font-size: 1.05rem; color: #222; line-height: 1.6; }

/* Make main hero paragraph larger for emphasis (line 31 in index.html) */
.hero-text p { font-size: 1.35rem; margin: 0; }

@media (max-width: 900px) {
	.hero { flex-direction: column; }
	.hero-image { width: 100%; height: 320px; }
	.hero-text { width: 100%; }
	.hero-text p { font-size: 1.05rem; }
}

/* Main content font sizing (slightly larger for readability) */
main { font-size: 1.15rem; }