/* Base */
:root{
  --bg:#f7f1e6;
  --ink:#3b281e;
  --gold:#b08b48;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
}

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid #e7decd;
  background:linear-gradient(180deg,#faf4ea 0%, #f3ead8 100%);
  position:sticky; top:0; z-index:10;
}
.brand{font-family:"EB Garamond", serif; font-weight:800; letter-spacing:.5px}
.controls{display:flex; gap:10px; align-items:center}
.controls button{font-size:18px; padding:6px 10px; border-radius:8px; border:1px solid #c9b89b; background:#fff; cursor:pointer}

.hero{
  position:relative; min-height:70vh; display:grid; place-items:center;
  padding:4rem 1rem; background:
    radial-gradient(1200px 600px at 50% 10%, rgba(255,219,160,.25), transparent 60%);
}
.vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.18) 100%);
  pointer-events:none; opacity:.35;
}
.hero-inner{max-width:900px; text-align:center; position:relative}
.hero h1{font-family:"EB Garamond", serif; font-size:44px; margin:0 0 16px; letter-spacing:.5px}
.hero p{font-size:18px; opacity:.9}
.cta{
  margin-top:20px; padding:12px 20px; font-weight:600; border-radius:10px; border:0; cursor:pointer;
  color:white; background:linear-gradient(180deg,#a67c2e,#7a5a20);
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.scrolls{padding:2.5rem 1rem 4rem; max-width:1200px; margin:0 auto}
.scrolls h2{font-family:"EB Garamond",serif; font-size:48px; text-align:center; margin:0}
.scrolls .sub{ text-align:center; margin:.5rem auto 2rem; opacity:.8}
.scroll-grid{
  display:grid; gap:22px; grid-template-columns: repeat(5,1fr);
}
@media (max-width:1100px){ .scroll-grid{grid-template-columns: repeat(3,1fr);} }
@media (max-width:680px){ .scroll-grid{grid-template-columns: repeat(2,1fr);} }

.scroll-item{
  border:0; background:transparent; cursor:pointer; padding:0; position:relative; outline-offset:4px;
}
.scroll-item:focus-visible{ outline:2px solid #7a5a20; border-radius:12px}
.scroll-frame{
  aspect-ratio: 1.35 / 1; /* lock shape */
  background-image: url('assets/torah-scroll.png'); /* USER: put your PNG here */
  background-size: cover; background-position:center;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  transition: transform .25s ease, filter .25s ease;
}
.scroll-item:hover .scroll-frame{ transform: translateY(-4px) scale(1.02); filter: brightness(1.05)}

.scroll-text{
  width:68%; max-width:520px; text-align:center;
  color:#2d241b; text-shadow:0 1px 0 rgba(255,255,255,.5), 0 1px 10px rgba(0,0,0,.15);
  background: rgba(255,248,233,.35);
  border-radius:10px; padding:12px 10px;
  backdrop-filter: blur(2px);
}
.title{font-family:"EB Garamond", serif; font-weight:800; letter-spacing:1px; font-size:32px}
.subtitle{font-family:"EB Garamond", serif; font-size:16px; opacity:.95}

.hint{ text-align:center; margin:1.5rem 0 0; opacity:.75}

footer{ padding:2rem 1rem; text-align:center; opacity:.7}