:root{
  --red: #8b201c;
  --red-deep: #641412;
  --red-soft: #a8342c;
  --gold: #a87a2d;
  --gold-light: #c9a054;
  --gold-soft: #d6b478;
  --cream: #faf2e3;
  --cream-warm: #f3e6cc;
  --beige: #e7d2af;
  --ink: #3a2a1f;
  --ink-soft: #6b5847;

  --font-display: "Frank Ruhl Libre", "Noto Serif Hebrew", serif;
  --font-body: "Noto Serif Hebrew", "Frank Ruhl Libre", serif;

  --ease: cubic-bezier(.22,.9,.25,1);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  min-height:100vh;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--cream);
  background-image: url("images/paper-texture.png");
  background-size: 680px 680px;
  background-repeat: repeat;
  background-attachment: fixed;
  position: relative;
  overflow-x:hidden;
  animation: bg-breathe 26s ease-in-out infinite;
}

@keyframes bg-breathe{
  0%, 100% { background-color: var(--cream); }
  50% { background-color: var(--cream-warm); }
}

.grain-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(139,32,28,0.05), transparent 45%),
    radial-gradient(ellipse at 85% 90%, rgba(168,122,45,0.08), transparent 45%);
  mix-blend-mode: multiply;
}

/* ---------- floating gold dust ---------- */
.floating-dust{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.dust-mote{
  position:absolute;
  bottom:-5%;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, var(--gold-light), var(--gold) 70%);
  opacity:.35;
  animation-name: float-up;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes float-up{
  0%{ transform: translateY(0) translateX(0) scale(1); opacity:0; }
  8%{ opacity:.45; }
  50%{ transform: translateY(-55vh) translateX(2vw) scale(1.15); }
  92%{ opacity:.3; }
  100%{ transform: translateY(-108vh) translateX(-2vw) scale(.9); opacity:0; }
}

/* ---------- reveal on scroll ---------- */
[data-reveal]{
  opacity:0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal].is-visible{
  opacity:1;
  transform: translateY(0);
}

section, header, footer{ position:relative; z-index:3; }

/* ---------- hero ---------- */
.hero{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 6vh 6vw;
  overflow:hidden;
}

.hero-mandala{
  position:absolute;
  width: 60vmax;
  height: 60vmax;
  background-image: url("images/hero-mandala.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity:.16;
  pointer-events:none;
  animation: spin-slow 140s linear infinite;
}
.hero-mandala--right{ top: -18vmax; right: -20vmax; }
.hero-mandala--left{ bottom: -22vmax; left: -20vmax; animation-direction: reverse; }

@keyframes spin-slow{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.hero-content{ max-width: 720px; }

.hero-kicker{
  font-family: var(--font-display);
  letter-spacing: .35em;
  font-size: .85rem;
  color: var(--gold);
  text-transform: none;
  margin: 0 0 1.4rem;
}

.hero-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.25;
  color: var(--red);
  margin: 0;
  text-shadow: 0 2px 24px rgba(139,32,28,.08);
}
.hero-title span{
  display:inline-block;
  color: var(--gold);
  font-weight: 500;
  font-size: .62em;
  margin-top: .5rem;
  letter-spacing: .04em;
}

.ornament-divider{
  display:flex;
  justify-content:center;
  margin: 2.2rem auto;
  max-width: 420px;
}
.ornament-divider img{ width:100%; height:auto; display:block; }
.ornament-divider--section{ max-width: 360px; margin: 0 auto; padding: 1rem 0; }

.hero-logo{
  width: 150px;
  margin: 2.2rem auto 1.6rem;
  opacity: .92;
  animation: logo-fade-in 1.6s var(--ease) .3s both;
}
.hero-logo img{ width:100%; height:auto; display:block; }
@keyframes logo-fade-in{
  from{ opacity:0; transform: translateY(10px) scale(.96); }
  to{ opacity:.92; transform: translateY(0) scale(1); }
}

.hero-sub{
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-soft);
  letter-spacing: .05em;
  margin: 0;
  line-height: 1.8;
}
.hero-sub-names{
  display:inline-block;
  margin-top: .2rem;
  color: var(--red);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: .06em;
}

.scroll-hint{
  position:absolute;
  bottom: 2.4rem;
  left:50%;
  transform: translateX(-50%);
}
.scroll-hint span{
  display:block;
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--gold), transparent);
  position:relative;
}
.scroll-hint span::after{
  content:"";
  position:absolute;
  bottom:0; right:-3px;
  width:7px; height:7px;
  border-radius:50%;
  background: var(--gold);
  animation: drip 2.2s ease-in-out infinite;
}
@keyframes drip{
  0%{ transform: translateY(-46px); opacity:0; }
  20%{ opacity:1; }
  100%{ transform: translateY(0); opacity:0; }
}

/* ---------- generic section layout ---------- */
.section{ padding: 9vh 6vw; }
.section-inner{ max-width: 760px; margin: 0 auto; text-align:center; }

.eyebrow{
  font-family: var(--font-display);
  color: var(--gold);
  letter-spacing: .3em;
  font-size: .8rem;
  margin: 0 0 .6rem;
}
.section-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  color: var(--red);
  margin: 0 0 .3rem;
}

/* ---------- letter ---------- */
.letter-text{
  font-size: 1.18rem;
  line-height: 2;
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.letter-text--accent{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--red);
}
.letter-text--signature{
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- video ---------- */
.video-frame{
  position: relative;
  display:block;
  max-width: 640px;
  margin: 1.6rem auto 1rem;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 20px 50px -18px rgba(58,42,31,.45);
  border: 3px solid var(--cream);
  outline: 1px solid var(--beige);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.video-frame:hover{
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 28px 60px -16px rgba(58,42,31,.55);
}
.video-thumb{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}
.play-button{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--cream);
  background: radial-gradient(circle, rgba(139,32,28,.55), rgba(58,20,18,.25) 60%, transparent 70%);
}
.play-button svg{
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
  animation: pulse-play 2.6s ease-in-out infinite;
}
@keyframes pulse-play{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.1); }
}
.video-caption{
  color: var(--ink-soft);
  font-size: .95rem;
  margin-top: .8rem;
}

/* ---------- matbucha gallery ---------- */
.matbucha-gallery{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, minmax(120px, 1fr));
  gap: 1.1rem;
  max-width: 780px;
  margin: 0 auto 3.6rem;
  height: 420px;
}

.gallery-item{
  margin:0;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 3px solid var(--cream);
  outline: 1px solid var(--beige);
  box-shadow: 0 16px 34px -16px rgba(58,42,31,.4);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.gallery-item::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 0 0 1px rgba(168,122,45,.25);
  border-radius: 14px;
  pointer-events:none;
}
.gallery-item img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  transition: transform .8s var(--ease);
}
.gallery-item:hover{
  transform: translateY(-6px) rotate(0deg) !important;
  box-shadow: 0 24px 44px -14px rgba(58,42,31,.5);
  z-index: 4;
}
.gallery-item:hover img{ transform: scale(1.08); }

.gallery-item--one{
  grid-column: 1 / 4;
  grid-row: 1 / 3;
  transform: rotate(-1.2deg);
}
.gallery-item--two{
  grid-column: 4 / 7;
  grid-row: 1 / 2;
  transform: rotate(1deg);
}
.gallery-item--three{
  grid-column: 4 / 6;
  grid-row: 2 / 3;
  transform: rotate(-0.6deg);
}
.gallery-item--four{
  grid-column: 6 / 7;
  grid-row: 2 / 3;
  transform: rotate(1.4deg);
}

@media (max-width: 720px){
  .matbucha-gallery{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, minmax(110px, 1fr));
    height: 460px;
  }
  .gallery-item--one{ grid-column: 1 / 3; grid-row: 1 / 2; }
  .gallery-item--two{ grid-column: 1 / 2; grid-row: 2 / 3; }
  .gallery-item--three{ grid-column: 2 / 3; grid-row: 2 / 3; }
  .gallery-item--four{ grid-column: 1 / 3; grid-row: 3 / 4; }
}

/* ---------- recipe ---------- */
.recipe-title{ font-size: clamp(2.4rem, 5vw, 3.4rem); }
.recipe-intro{
  font-size: 1.08rem;
  line-height: 1.9;
  color: var(--ink-soft);
  margin: 0 auto 3rem;
  max-width: 640px;
}

.recipe-grid{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 2.4rem;
  text-align: right;
}

.ingredients-card, .steps-card{
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.15));
  border: 1px solid rgba(168,122,45,.28);
  border-radius: 18px;
  padding: 2rem 2.1rem;
  backdrop-filter: blur(2px);
  position:relative;
}
.ingredients-card::before, .steps-card::before{
  content:"";
  position:absolute; inset: 8px;
  border: 1px solid rgba(168,122,45,.18);
  border-radius: 12px;
  pointer-events:none;
}

.card-heading{
  font-family: var(--font-display);
  color: var(--red);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 1.2rem;
  text-align: center;
}

.ingredients-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap: .9rem;
}
.ingredients-list li{
  font-size: 1.05rem;
  border-bottom: 1px dashed rgba(168,122,45,.35);
  padding-bottom: .8rem;
  display:flex;
  align-items:center;
  gap: .8rem;
}
.ingredients-list li:last-child{ border-bottom:none; }
.ing-icon{
  width: 40px;
  height: 40px;
  min-width: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
.qty{
  font-family: var(--font-display);
  color: var(--gold);
  font-weight: 700;
  display:inline-block;
}

.steps-list{
  margin:0; padding-inline-start: 1.3rem;
  display:flex; flex-direction:column; gap: 1.1rem;
}
.steps-list li{
  font-size: 1.05rem;
  line-height: 1.85;
  padding-inline-start: .3rem;
}
.steps-list li::marker{
  font-family: var(--font-display);
  color: var(--red);
  font-weight: 700;
}

/* ---------- footer ---------- */
.site-footer{
  text-align:center;
  padding: 5vh 6vw 8vh;
}
.footer-text{
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.15rem;
  letter-spacing: .04em;
  margin: 0 0 .5rem;
}
.footer-text--sub{
  color: var(--ink-soft);
  font-size: 1rem;
  font-family: var(--font-body);
}
.footer-text--names{
  color: var(--red);
  font-weight: 600;
  font-size: 1.3rem;
  margin-top: 1rem;
}
.footer-text--date{
  color: var(--ink-soft);
  font-size: .85rem;
  letter-spacing: .1em;
  font-family: var(--font-body);
}

/* ---------- responsive ---------- */
@media (max-width: 760px){
  .recipe-grid{ grid-template-columns: 1fr; }
  .hero-mandala{ width: 95vmax; height: 95vmax; }
  .letter-text{ font-size: 1.05rem; }
}