/* The Rabbi's wedding site. Premium and quiet (owner, 25.10.2026: "ביקשתי
   שיהיה יוקרתי"): a full-bleed photograph with the name set large over it,
   deep night-blue and a muted gold, generous space, one thin gold rule as the
   recurring mark. Karantina for the name and titles (owner's choice,
   25.10.2026, after Tanya Club), Frank Ruhl Libre for reading headings,
   Assistant for text. Karantina is tall and narrow, so display sizes run
   about a third larger than a regular serif would. */
:root {
  --night: #151b2b;      /* hero, call to action, footer */
  --night-2: #1d2539;
  --paper: #fbfaf8;
  --band: #f3f0ea;       /* a quiet alternate section */
  --ink: #1b1f29;
  --muted: #5a606c;
  --line: #e2ddd3;
  --gold: #c9a76a;       /* gold on night only */
  --gold-ink: #85652a;   /* gold as text on paper (4.9:1) */
  --on-night: #f4efe6;
  --on-night-muted: #b9b3a8;
  --wa: #0f6b4f;
  --display: "Karantina", "Frank Ruhl Libre", "Times New Roman", serif;
  --serif: "Frank Ruhl Libre", "Times New Roman", serif;
  --text: "Assistant", "Arial Hebrew", Arial, sans-serif;
  --col: 680px;
  --wide: 1160px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 17px; line-height: 1.75; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; }
[id] { scroll-margin-top: 90px; }

.col, .wide {
  width: 100%; margin-inline: auto;
  padding-left: max(22px, env(safe-area-inset-left, 0px));
  padding-right: max(22px, env(safe-area-inset-right, 0px));
}
.col { max-width: calc(var(--col) + 44px); }
.wide { max-width: calc(var(--wide) + 44px); }

.skip { position: absolute; top: 0; inset-inline-start: 0; transform: translateY(-120%); background: var(--night); color: var(--on-night); padding: 8px 14px; z-index: 30; }
.skip:focus { transform: none; }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgb(251 250 248 / .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); transition: background-color .35s ease, border-color .35s ease, color .35s ease; }
.top .wide { display: flex; align-items: center; gap: 28px; min-height: 76px; }
/* Over a photo: transparent with light type until the page scrolls */
.top.over { position: fixed; inset: 0 0 auto 0; background: transparent; border-color: transparent; color: var(--on-night); backdrop-filter: none; }
.top.over.solid { background: rgb(21 27 43 / .94); backdrop-filter: blur(10px); border-color: rgb(255 255 255 / .08); }
.mark { text-decoration: none; display: grid; line-height: 1.15; }
.mark-name { font-family: var(--display); font-size: 2.1rem; line-height: 1; letter-spacing: .01em; }
.mark-role { font-size: .8rem; color: var(--muted); letter-spacing: .02em; }
.top.over .mark-role { color: var(--on-night-muted); }
.nav { margin-inline-start: auto; }
.nav ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.nav a { text-decoration: none; font-size: .95rem; display: inline-block; padding-block: 12px; opacity: .85; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current] { opacity: 1; border-color: currentColor; }
.lang { font-size: .88rem; text-decoration: none; border: 1px solid currentColor; border-radius: 999px; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; opacity: .85; }
.lang:hover { opacity: 1; }
.menu-btn { display: none; align-items: center; gap: 8px; background: none; border: 0; color: inherit; font: inherit; font-size: .95rem; min-height: 44px; padding: 0 4px; cursor: pointer; }
.menu-btn svg { width: 24px; height: 24px; }
@media (max-width: 1080px) {
  .nav { display: none; }
  .top .lang { margin-inline-start: auto; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 420px) {
  .mark-name { font-size: 1.8rem; }
  .top .wide { gap: 14px; }
  .menu-btn span { display: none; }
}

/* ---------- Menu (phones and tablets) ---------- */
.menu { position: fixed; inset: 0; z-index: 40; background: var(--night); color: var(--on-night); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.menu-close { background: none; border: 1px solid rgb(255 255 255 / .25); color: inherit; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.menu-close svg { width: 20px; height: 20px; }
.menu-list { list-style: none; margin: 24px auto 0; display: grid; }
.menu-list a { display: block; font-family: var(--display); font-size: 2.7rem; line-height: 1.1; padding-block: 12px; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .08); }
.menu-list a[aria-current] { color: var(--gold); }
.menu-foot { margin-top: auto; padding-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) { animation: menu-in .35s ease both; }
  @keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; text-decoration: none; font-weight: 600; font-size: .98rem; letter-spacing: .01em; border-radius: 2px; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn.gold { background: var(--gold); color: var(--night); }
.btn.gold:hover { background: #d8b87e; }
.btn.ghost { border: 1px solid rgb(244 239 230 / .55); color: var(--on-night); }
.btn.ghost:hover { border-color: var(--on-night); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(100svh, 980px); display: grid; align-items: end; color: var(--on-night); background: var(--night); isolation: isolate; overflow: hidden; }
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero picture img { object-fit: cover; object-position: 50% 30%; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(to top, rgb(12 16 27 / .92) 0%, rgb(12 16 27 / .55) 42%, rgb(12 16 27 / .15) 70%, rgb(12 16 27 / .45) 100%); }
.hero-in { padding-top: 150px; padding-bottom: clamp(48px, 9vh, 96px); }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(4.2rem, 16vw, 8.4rem); line-height: .95; margin: 0; letter-spacing: .01em; }
.rule { display: block; width: 72px; height: 1px; background: var(--gold); margin: 26px 0 22px; }
.hero-line { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin: 0; line-height: 1.5; }
.hero-where { margin: 6px 0 0; color: var(--on-night-muted); font-size: 1.02rem; }
.hero-act { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
@media (min-aspect-ratio: 1/1) {
  /* Wide screens: the photo is wide, the text keeps to the start side */
  /* Wide screens: the upright photo fills the right part of the frame (the
     Rabbi stands on its right), and the words sit on the night-blue left,
     in both languages */
  .hero picture { left: auto; right: 0; width: 60%; }
  .hero picture img { object-position: 50% 30%; }
  .hero::after { background: linear-gradient(to right, var(--night) 0%, var(--night) 40%, rgb(21 27 43 / .55) 52%, rgb(21 27 43 / 0) 68%), linear-gradient(to bottom, rgb(12 16 27 / .65), transparent 22%), linear-gradient(to top, rgb(12 16 27 / .45), transparent 35%); }
  .hero-in { align-self: center; }
  .hero-copy { max-width: 560px; margin-left: 0; margin-right: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero picture img { animation: settle 1.8s cubic-bezier(.2, .6, .2, 1) both; }
  .hero .rule { animation: draw 1.2s .4s cubic-bezier(.2, .7, .2, 1) both; transform-origin: right; }
  [dir="ltr"] .hero .rule { transform-origin: left; }
  @keyframes settle { from { transform: scale(1.04); } to { transform: none; } }
  @keyframes draw { from { transform: scaleX(0); } to { transform: none; } }
}

/* ---------- Sections ---------- */
main > section { padding-block: clamp(64px, 10vw, 120px); }
main > section.hero { padding-block: 0; }
.title { font-family: var(--display); font-size: clamp(2.8rem, 5.6vw, 4.2rem); line-height: 1; margin: 0 0 clamp(28px, 4vw, 48px); color: var(--ink); }
.title::after { content: ""; display: block; width: 48px; height: 1px; background: var(--gold-ink); margin-top: 18px; }

.statement { text-align: center; }
.statement p { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.85rem); line-height: 1.65; margin: 0; color: var(--ink); }
.statement .col::before { content: ""; display: block; width: 1px; height: 56px; background: var(--gold-ink); margin: 0 auto 36px; }

/* Services: large photographic panels, alternating sides */
.panels { display: grid; gap: clamp(48px, 7vw, 96px); }
.panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; text-decoration: none; }
.panel.flip .panel-img { order: 2; }
.panel-img { overflow: hidden; display: block; }
.panel-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .6, .2, 1); }
.panel:hover .panel-img img { transform: scale(1.03); }
.panel-text { display: grid; gap: 14px; max-width: 30em; }
.panel-who { color: var(--gold-ink); font-size: .92rem; letter-spacing: .02em; }
.panel h3 { font-family: var(--display); font-size: clamp(2.8rem, 4.8vw, 3.8rem); line-height: 1; margin: 0; }
.panel-line { color: var(--muted); font-size: 1.05rem; }
.more { justify-self: start; margin-top: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--gold-ink); color: var(--ink); font-weight: 600; font-size: .95rem; }
@media (max-width: 760px) {
  .panel { grid-template-columns: 1fr; gap: 22px; }
  .panel.flip .panel-img { order: 0; }
}

/* About */
.about { background: var(--band); }
.about-in { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.about figure { margin: 0; }
.about img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.about p { font-size: 1.1rem; margin: 0 0 16px; max-width: 34em; }
@media (max-width: 760px) { .about-in { grid-template-columns: 1fr; } }

/* Gallery: native horizontal scrolling with arrows */
.strip {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding-left: max(22px, env(safe-area-inset-left, 0px), calc((100vw - var(--wide)) / 2));
  padding-right: max(22px, env(safe-area-inset-right, 0px), calc((100vw - var(--wide)) / 2));
  scroll-padding-inline: max(22px, calc((100vw - var(--wide)) / 2));
}
.strip::-webkit-scrollbar { display: none; }
.strip figure { margin: 0; flex: none; scroll-snap-align: start; }
.strip img { height: clamp(320px, 58vw, 480px); width: auto; object-fit: cover; }
.strip figcaption { font-size: .8rem; color: var(--muted); margin-top: 8px; }
.gallery-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.note { color: var(--muted); font-size: .92rem; margin: 0; }
.arrows { display: flex; gap: 10px; flex: none; }
.arrows button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color .2s ease, opacity .2s ease; }
.arrows button:hover:not(:disabled) { border-color: var(--ink); }
.arrows button:disabled { opacity: .3; cursor: default; }
.arrows svg { width: 20px; height: 20px; }
/* The glyph points right. In LTR "next" points right; in RTL "next" points left. */
[dir="ltr"] .arrows .prev svg, [dir="rtl"] .arrows .next svg { transform: scaleX(-1); }

/* Steps: a real sequence, so numbered */
.band { background: var(--band); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; padding-block: 22px; border-top: 1px solid var(--line); counter-increment: step; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step); grid-row: span 2; font-family: var(--display); color: var(--gold-ink); font-size: 3rem; line-height: .9; }
.steps strong { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; }
.steps span { color: var(--muted); }

/* Video */
.reels { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: 14px; margin-bottom: 14px; }
.reels a { position: relative; display: block; overflow: hidden; }
.reels img, .reels video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--band); display: block; }
.play { position: absolute; inset: auto 14px 14px auto; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / .92); }
.play::after { content: ""; position: absolute; left: 17px; top: 13px; border-left: 13px solid var(--night); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.plain { color: var(--muted); text-underline-offset: 5px; text-decoration-color: var(--line); }
.plain:hover { color: var(--ink); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-family: var(--serif); font-size: 1.2rem; display: flex; justify-content: space-between; gap: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-ink); font-family: var(--text); font-size: 1.4rem; line-height: 1.2; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 20px; color: var(--muted); }

.list { margin: 0; padding: 0; list-style: none; display: grid; }
.list li { padding: 16px 0; border-top: 1px solid var(--line); font-size: 1.08rem; }
.list li:last-child { border-bottom: 1px solid var(--line); }

/* Call to action */
.cta { background: var(--night); color: var(--on-night); text-align: center; }
.cta .rule { margin: 0 auto 30px; }
.cta h2 { font-family: var(--display); font-size: clamp(3rem, 7vw, 5rem); line-height: 1; margin: 0 0 18px; }
.cta p { color: var(--on-night-muted); margin: 0 0 30px; font-size: 1.08rem; }
.cta p.cta-phone { margin: 22px 0 18px; }
.cta-phone a { color: var(--on-night); text-decoration: none; font-size: 1.15rem; letter-spacing: .03em; }
.cta p.nets { display: flex; justify-content: center; gap: 12px; margin: 0; }
.net { width: 46px; height: 46px; border: 1px solid rgb(244 239 230 / .3); border-radius: 50%; display: grid; place-items: center; color: var(--on-night); }
.net:hover { border-color: var(--gold); color: var(--gold); }
.net svg { width: 19px; height: 19px; }

main > section.page-head { padding-top: 56px; padding-bottom: 0; }
.page-head h1 { font-family: var(--display); font-size: clamp(3.2rem, 7vw, 4.6rem); line-height: 1; margin: 0 0 12px; }
.lead { color: var(--muted); font-size: 1.1rem; }
.prose p { margin: 0 0 16px; }

/* Footer */
.foot { background: var(--night-2); color: var(--on-night-muted); padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); font-size: .9rem; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: end; }
.foot .mark-name { color: var(--on-night); font-size: 1.9rem; }
.foot p { margin: 4px 0 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-links a { text-decoration: none; display: inline-block; padding-block: 10px; }
.foot-links a:hover { color: var(--on-night); }

/* Floating WhatsApp: a small round button, shown once the hero's own button is gone */
.wa { position: fixed; z-index: 15; bottom: max(18px, env(safe-area-inset-bottom, 0px)); inset-inline-end: max(18px, env(safe-area-inset-right, 0px)); width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px rgb(10 30 22 / .28); transition: transform .35s ease, opacity .35s ease; }
.wa svg { width: 28px; height: 28px; }
.wa.away { transform: translateY(24px); opacity: 0; pointer-events: none; }

/* Text motion, after the Chabad site: blocks rise 18px and fade in as they
   reach the screen (1.1s, its easing), steps one after another; the hero
   name rises word by word on load. Hidden only when the script runs, and
   never for reduced motion. */
:root { --ease: cubic-bezier(.25, .6, .2, 1); }
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .rv.d1 { --d: .14s; }
  .hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
  .hero h1 .w > span { display: inline-block; animation: word-up 1.1s var(--ease) both; animation-delay: var(--d); }
  .hero .up { animation: fade-up 1.1s var(--ease) both; animation-delay: var(--d); }
  @keyframes word-up { from { transform: translateY(105%); } to { transform: none; } }
  @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}