*{margin:0;padding:0;box-sizing:border-box} /* reset browser default margins and paddings, use border-box sizing for layout consistency */
body{font-family:Arial,sans-serif;background:#111;color:#eee;line-height:1.6} /* set page font, dark background, light text, and comfortable line spacing */
.hero{ /* hero section at the top of the page */
min-height:100vh; /* make hero fill the full viewport height */
background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.7)),url('https://placehold.co/1600x900?text=Hero+Artwork') center/cover; /* place a background image with a dark overlay */
}
nav{display:flex;justify-content:space-between;padding:1.2rem 2rem} /* layout navigation as a horizontal row with spacing */
nav ul{display:flex;gap:1.2rem;list-style:none} /* display nav links in a row and remove list bullets */
nav a,.logo{color:#fff;text-decoration:none} /* make nav links and logo white and remove underline */
nav .logo{display:flex;align-items:center;gap:0.8rem} /* align logo container vertically and add spacing */
nav .logo a{display:flex;align-items:center;gap:0.6rem} /* ensure image and text sit on the same row and are vertically centered */
nav .logo img{height:50px;width:auto;display:block} /* size the logo image and keep its aspect ratio */
nav .logo .logo-text{font-size:1rem;font-weight:700;display:inline-block;line-height:1;} /* fallback text styling, keep it vertically centered */

/* Hover and focus styles for interactive elements */
nav a:hover, nav a:focus { color: #c69c6d; transition: color 160ms ease; } /* change nav link color on hover/focus */
nav .logo a:hover .logo-text, nav .logo a:focus .logo-text { color: #c69c6d; }

/* Button hover effect */
.btn{transition: transform 160ms ease, background 160ms ease;}
.btn:hover, .btn:focus { background: #b07a4e; transform: translateY(-3px); }

/* Improve keyboard focus visibility */
nav a:focus, .btn:focus { outline: 2px solid rgba(198,156,109,0.18); outline-offset: 3px; }
.hero-content{height:80vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center} /* center hero text vertically and horizontally */
.hero-content h1{font-size:4rem} /* make the hero headline large */
.btn{margin-top:1rem;padding:.9rem 1.4rem;background:#c69c6d;color:#111;text-decoration:none;border-radius:6px} /* style the call-to-action button */
.section{max-width:1200px;margin:auto;padding:5rem 2rem} /* constrain section width and add spacing around content */
.featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem} /* create a responsive grid for featured images */
.featured-grid img{width:100%;display:block} /* make featured images fill their container and remove inline spacing */
footer{text-align:center;padding:2rem;border-top:1px solid #333} /* center footer text, add padding, and separate with a border */