/* style.css - minimal, responsive full-screen hero */
:root{
  --bg:#fff8f2;
  --text:#332925;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
/* Background image via <picture> fills container */
.hero .bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero .bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.05);
}
.overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.45) 100%);
  z-index:1;
}
.content{
  position:relative;
  z-index:2;
  text-align:center;
  padding: clamp(16px, 4vw, 48px);
  color: #fff;
  width:min(100%, 900px);
}
h1{
  margin:0 0 16px 0;
  font-size: clamp(28px, 6vw, 56px);
  line-height:1.1;
  letter-spacing:0.3px;
  font-weight: 700;
}
p{
  margin:0;
  font-size: clamp(16px, 3.5vw, 24px);
  opacity:0.95;
}
.footer{
  position:fixed;
  bottom:12px;
  left:0; right:0;
  text-align:center;
  font-size:12px;
  color:#fff;
  opacity:0.8;
  z-index:2;
}
/* Reduce gradient intensity on very small screens for readability */
@media (max-width:420px){
  .overlay{ background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.40) 100%); }
}