:root{
  --bg1:#F5EBDD; /* Light sand */
  --bg2:#E2D4C7; /* Warm taupe */
  --panel:rgba(255,242,232,0.9); /* Soft clay overlay */
  --text:#3E2717; /* Deep brown */
  --muted:#8D6E63; /* Clay muted brown */
  --accent:#C14802; /* Terra cotta */
  --accent2:#D97C45; /* Burnt sienna */
}
html,body{ height:100%; margin:0; font-family:'Segoe UI', Arial, sans-serif; }
body{ background: radial-gradient(120% 120% at 50% 20%, var(--bg1), var(--bg2)); color:var(--text); }
body {
  font-family: 'Open Sans', sans-serif;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 60%);
  pointer-events: none;
}

.wrap{ min-height:100%; display:grid; place-items:center; padding:32px; }
.card{ width:min(980px, 92vw); background:var(--panel); border:1px solid var(--accent2); border-radius:16px; padding:28px; box-shadow:0 20px 80px rgba(0,0,0,.35); text-align:center; }
.card h1{ margin:0 0 10px; font-size: clamp(24px, 4vw, 42px); font-weight:900; background: linear-gradient(45deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.card p{ margin:0 0 18px; color:var(--muted); font-size: clamp(14px, 2.2vw, 18px); }
.image-frame{ position:relative; border:2px dashed var(--accent); border-radius:14px; padding:10px; background: var(--panel); }
.image-frame img{ display:block; width:100%; height:auto; margin:0 auto; border-radius:10px; }
.image-frame.missing{ display:grid; place-items:center; padding:40px; }
.image-frame .missing-note{ display:none; color:#cbd5e1; font-size:14px; }
.image-frame.missing .missing-note{ display:block; }
.hint{ margin-top:12px; color:#9ca3af; font-size:12px; }

h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 6vw, 56px);
  margin-bottom: 16px;
  color: var(--accent2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.card {
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  padding: 40px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.image-frame {
  border: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

.image-frame img {
  border-radius: 12px;
}

@media (max-width:560px){ .card{ padding:20px; } }


/* Carousel */
.carousel{ position:relative; margin-top:24px; }
.carousel::before,.carousel::after{ content:""; display:block; height:2px; background:var(--accent2); opacity:.6; margin:12px 0; }
.carousel-viewport{ overflow:hidden; width:100%; }
.carousel-track{ display:flex; transition: transform .4s ease; will-change: transform; }
.slide{ flex:0 0 calc(100% / 3); padding:8px; }
.slide img{ width:100%; height:auto; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.2); aspect-ratio:4/3; object-fit:cover; }
.carousel-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); color:#fff; border:none; border-radius:50%; width:42px; height:42px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25); display:grid; place-items:center; z-index:2; }
.carousel-nav.prev{ left:8px; }
.carousel-nav.next{ right:8px; }
.carousel-nav:hover{ background:rgba(0,0,0,.6); }
.carousel-nav:focus{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }

@media (max-width:900px){
  .slide{ flex-basis:50%; }
}
@media (max-width:600px){
  .slide{ flex-basis:100%; }
}

/* 3x3 Gallery Grid */
.gallery-grid{ margin-top:24px; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.gallery-grid img{ width:100%; height:auto; display:block; border-radius:8px; object-fit:cover; aspect-ratio:1/1; box-shadow:0 4px 12px rgba(0,0,0,.15); }

@media (max-width:700px){
  .gallery-grid{ grid-template-columns:repeat(3, 1fr); gap:6px; }
}