/* Base reset & variables */
:root{
  --bg: #f6f1e7;
  --ink: #2b1e14;
  --muted: #6b5746;
  --accent: #b68d40;
  --card: #efe4d1;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

/* Progress bar */
.progress{
  position: fixed;
  top: 0; left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #8c5f0d);
  z-index: 1000;
  transition: width .15s ease-out;
}

/* Header */
.site-header{
  min-height: 88vh;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(1200px 400px at 50% 110%, rgba(182,141,64,.15), transparent 60%),
    radial-gradient(1000px 300px at 50% -10%, rgba(0,0,0,.08), transparent 50%);
}
.site-header .title{
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: .5px;
  margin: 0 0 .25rem;
}
.site-header .tag{
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.site-header .cta{
  display: inline-block;
  padding: .9rem 1.3rem;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  text-decoration: none;
  box-shadow: var(--shadow);
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s;
}
.site-header .cta:hover{ transform: translateY(-2px); opacity:.95 }

/* Panels */
.snap{ scroll-behavior:smooth; }
.panel{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: min(5vw, 36px);
  align-items: center;
  padding: clamp(2rem, 6vw, 6rem) min(5vw, 48px);
  max-width: 1200px;
  margin: 0 auto;
}
.panel.alt{ grid-template-columns: 1fr 1.3fr; }
.panel-media{
  border: 6px solid #8e6a3c;
  box-shadow: var(--shadow);
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
}
.panel-media img{
  display:block;
  width:100%; height:auto;
}
.panel-text{
  background: var(--card);
  border: 2px dashed #8e6a3c;
  padding: clamp(1rem, 2vw, 2rem);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .6s ease, opacity .6s ease;
}
.panel.inview .panel-text{
  transform: translateY(0);
  opacity: 1;
}
.panel-text p{ margin: 0 0 .9rem; }

/* Footer */
.site-footer{
  text-align:center;
  padding: 2rem 1rem 3rem;
  color: var(--muted);
}
.site-footer .backtop{
  display:inline-block;margin-top:.5rem;
  color: var(--accent);
  text-decoration:none;
  border-bottom:1px dashed var(--accent);
}

/* Responsive */
@media (max-width: 900px){
  .panel{ grid-template-columns: 1fr; }
  .panel.alt{ grid-template-columns: 1fr; }
}