/* site/home.css — the home page (vault EV-D49). One deliberate world, no theme switch: the hall at night, paper by day.
   The only accent is the brass of the hall's own chandeliers. Karantina for every headline (condensed, poster),
   Heebo for reading, Amatic SC only inside the hand sketch. Prefixed classes (h-) so site.css never collides. */
body.home {
  --night: #0B0B0C; --night-2: #141416; --paper: #ECEBE7; --paper-2: #E3E1DB;
  --ink: #161513; --smoke: #8C8983; --smoke-2: #5F5C57; --line-n: #2A2927; --line-p: #CFCCC4;
  --brass: #CDAA68; --brass-ink: #6F5320; --white: #F6F4EF;
  --display: 'Karantina', 'Heebo', sans-serif; --body: 'Heebo', system-ui, sans-serif; --hand: 'Amatic SC', 'Heebo', cursive;
  margin: 0; background: var(--night); color: var(--white); font: 300 17px/1.65 var(--body);
}
body.home * { box-sizing: border-box; }
body.home h1, body.home h2, body.home h3 { margin: 0; font-weight: 700; letter-spacing: 0; text-wrap: balance; }
body.home p { margin: 0; }
body.home a { color: inherit; }
.h-gut { padding-inline: clamp(16px, 5vw, 72px); }
.h-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 500 16px/1 var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.h-btn.brass { background: var(--brass); color: #17130B; }
.h-btn.line { border-color: #F6F4EF66; color: var(--white); background: #0B0B0C40; backdrop-filter: blur(6px); }
.h-btn:focus-visible, .h-seg button:focus-visible, .h-wipe input:focus-visible, .h-pills button:focus-visible, .h-auto:focus-visible, .h-nav button:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* Karantina's Latin letters are far wider than its Hebrew: English headlines run at 60% so they keep the same shape. */
html[data-lang="en"] body.home { --ds: .6; }
html[data-lang="en"] .h-word { --ds: 1; }

/* 1. the hero: the couple is already inside */
.h-hero { position: relative; min-height: clamp(640px, 94svh, 1000px); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; isolation: isolate; }
.h-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform-origin: 50% 40%; }
@media (prefers-reduced-motion: no-preference) { .h-hero > img { animation: h-settle 14s cubic-bezier(.2,.7,.2,1) both; } .h-copy > * { animation: h-rise .9s cubic-bezier(.2,.7,.2,1) both; } .h-copy > :nth-child(2) { animation-delay: .12s; } .h-copy > :nth-child(3) { animation-delay: .24s; } }
@keyframes h-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes h-rise { from { opacity: .001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.h-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, #0B0B0CF2 0%, #0B0B0CB0 34%, #0B0B0C00 62%), linear-gradient(to left, #0B0B0CA0 0%, #0B0B0C00 55%), linear-gradient(to bottom, #0B0B0C99 0%, #0B0B0C00 18%); }
html[dir="ltr"] .h-hero::after { background: linear-gradient(to top, #0B0B0CF2 0%, #0B0B0CB0 34%, #0B0B0C00 62%), linear-gradient(to right, #0B0B0CA0 0%, #0B0B0C00 55%), linear-gradient(to bottom, #0B0B0C99 0%, #0B0B0C00 18%); }
.h-nav { display: flex; align-items: center; gap: 24px; padding-block: 22px; }
.h-word { font: 700 calc(38px * var(--ds, 1))/1 var(--display); letter-spacing: .01em; direction: ltr; unicode-bidi: isolate; text-decoration: none; }
.h-nav nav { display: flex; gap: 24px; font-size: 15px; color: #F6F4EFC0; }
.h-nav nav a { text-decoration: none; }
.h-nav .grow { flex: 1; }
.h-nav .h-btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
.h-nav #lang { all: unset; cursor: pointer; font: 500 13px/1 var(--body); color: #F6F4EFC0; padding: 10px 12px; border-radius: 999px; border: 1px solid #F6F4EF40; }
.h-copy { align-self: end; max-width: 900px; padding-bottom: 40px; display: grid; gap: 22px; }
.h-copy h1 { font: 700 calc(clamp(68px, 11.5vw, 184px) * var(--ds, 1))/.9 var(--display); }
.h-copy h1 .b { display: block; color: var(--brass); }
.h-copy p { font-size: clamp(17px, 1.5vw, 21px); color: #F6F4EFD0; max-width: 34em; }
.h-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.h-ruler { padding-bottom: 26px; display: grid; gap: 10px; }
.h-ruler svg { width: 100%; height: 14px; display: block; }
.h-ruler path { stroke: var(--brass); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.h-ruler ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 14px; color: #F6F4EFB8; font-variant-numeric: tabular-nums; }
.h-ruler b { font-weight: 500; color: var(--white); }
.h-ruler .est { border-bottom: 1px dashed var(--brass); }

/* 2. the sketch couples get today, against the hall */
.h-paper { background: var(--paper); color: var(--ink); padding-block: clamp(64px, 10vw, 128px); }
.h-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .h-split { grid-template-columns: 1fr; } }
.h-kicker { font: 500 14px/1 var(--body); color: var(--brass-ink); }
.h-paper h2 { font: 700 calc(clamp(52px, 7vw, 104px) * var(--ds, 1))/.95 var(--display); margin-block: 14px 22px; }
.h-lede { font-size: 19px; color: var(--smoke-2); max-width: 30em; }
.h-facts { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.h-facts li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: baseline; border-top: 1px solid var(--line-p); padding-top: 14px; }
.h-facts b { font: 700 calc(40px * var(--ds, 1))/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.h-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper-2); margin-top: 28px; }
.h-seg button { all: unset; cursor: pointer; padding: 10px 18px; border-radius: 999px; font: 500 15px/1 var(--body); color: var(--smoke-2); }
.h-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.h-wipe { position: relative; width: min(100%, 560px); justify-self: center; aspect-ratio: 24.4 / 34; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px #16151326, 0 0 0 1px var(--line-p); background: #F7F5F0; touch-action: pan-y; direction: ltr; }
.h-sketchbox { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #00000000 0 23px, #1615130d 23px 24px), #F7F5F0; }
.h-sketchbox svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sketch .wall { fill: none; stroke: #2B2925; stroke-width: .16; stroke-linejoin: round; }
.sketch .tbl { fill: #F7F5F0; stroke: #2B2925; stroke-width: .07; }
.sketch .zone { fill: none; stroke: #2B2925; stroke-width: .06; stroke-dasharray: .3 .22; }
.sketch .fix { fill: #2B29250f; stroke: #2B2925; stroke-width: .06; }
.sketch .dimk { stroke: #2B2925; stroke-width: .06; fill: none; }
.sketch .hand { font-family: var(--hand); font-weight: 700; font-size: 1.15px; fill: #2B2925; text-anchor: middle; }
.sketch .hand.sm { font-size: .8px; } .sketch .hand.num { font-size: .82px; }
.h-render { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut, 50%)); }
.h-render img { width: 100%; height: 100%; object-fit: fill; display: block; }
.h-handle { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; margin-left: -1px; background: var(--brass); pointer-events: none; }
.h-handle::after { content: '⟷'; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--brass); color: #17130B; display: grid; place-items: center; font-size: 20px; box-shadow: 0 6px 20px #00000040; }
.h-wipe input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.h-tag { position: absolute; top: 12px; padding: 6px 12px; border-radius: 999px; font: 500 13px/1 var(--body); }
.h-tag.l { left: 12px; background: #161513d9; color: var(--paper); }
.h-tag.r { right: 12px; background: #F7F5F0e6; color: var(--ink); box-shadow: 0 0 0 1px var(--line-p); }
.h-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 3. the tour: one design, every moment */
.h-tour { background: var(--night-2); padding-block: clamp(64px, 10vw, 128px); }
.h-tour-head { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: end; justify-content: space-between; }
.h-tour h2 { font: 700 calc(clamp(52px, 7.2vw, 110px) * var(--ds, 1))/.95 var(--display); max-width: 14ch; }
.h-tour-head p { color: var(--smoke); max-width: 30em; font-size: 17px; }
.h-viewer { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
@media (max-width: 960px) { .h-viewer { grid-template-columns: 1fr; } }
.h-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 30px 90px #00000080; }
.h-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease; }
@media (prefers-reduced-motion: reduce) { .h-frame img { transition: none; } }
.h-cap { position: absolute; inset-inline-start: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; background: #0B0B0CC0; backdrop-filter: blur(6px); font-size: 14px; color: var(--white); }
.h-real { position: absolute; inset-inline-end: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid #F6F4EF55; font-size: 12px; color: #F6F4EFd0; background: #0B0B0C80; }
.h-controls { display: grid; gap: 22px; }
.h-group { display: grid; gap: 10px; }
.h-group > span { font-size: 13px; color: var(--smoke); }
.h-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.h-pills button { all: unset; cursor: pointer; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-n); color: #F6F4EFd8; font: 400 15px/1 var(--body); display: inline-flex; gap: 8px; align-items: center; }
.h-pills button[aria-pressed="true"] { background: var(--white); color: var(--night); border-color: var(--white); }
.h-pills i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px #ffffff40; }
.h-auto { all: unset; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; padding: 12px 18px; border-radius: 999px; background: var(--brass); color: #17130B; font: 500 15px/1 var(--body); justify-self: start; }
.h-fine { font-size: 13px; color: var(--smoke); line-height: 1.6; }

/* 4. night band: the honesty rule */
.h-rule { background: var(--night); padding-block: clamp(72px, 11vw, 140px); }
.h-rule h2 { font: 700 calc(clamp(56px, 8.6vw, 136px) * var(--ds, 1))/.92 var(--display); max-width: 14ch; }
.h-rule h2 .b { color: var(--brass); }
.h-tiers { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 760px) { .h-tiers { grid-template-columns: 1fr; } }
.h-tier { border-top: 1px solid var(--line-n); padding-top: 18px; display: grid; gap: 10px; }
.h-tier svg { width: 100%; height: 10px; }
.h-tier path { fill: none; stroke: var(--white); stroke-width: 2; }
.h-tier.est path { stroke: var(--brass); stroke-dasharray: 9 7; } .h-tier.sim path { stroke: var(--smoke); stroke-dasharray: 2 7; stroke-linecap: round; }
.h-tier h3 { font: 700 calc(34px * var(--ds, 1))/1 var(--display); }
.h-tier p { color: var(--smoke); font-size: 15px; }

/* 5. three steps, each with the real thing */
.h-steps { background: var(--paper); color: var(--ink); padding-block: clamp(64px, 10vw, 128px); }
.h-steps h2 { font: 700 calc(clamp(52px, 6.6vw, 100px) * var(--ds, 1))/.95 var(--display); max-width: 16ch; }
.h-three { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); align-items: start; }
@media (max-width: 900px) { .h-three { grid-template-columns: 1fr; } }
.h-step { display: grid; gap: 14px; }
.h-pic { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--night); }
.h-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-n { font: 400 15px/1 var(--body); color: var(--brass-ink); font-variant-numeric: tabular-nums; }
.h-step h3 { font: 700 calc(40px * var(--ds, 1))/1 var(--display); }
.h-step p { color: var(--smoke-2); font-size: 16px; }
.h-measure { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-measure path { stroke: var(--brass); stroke-width: 1.5; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 7 5; }
.h-measure rect { fill: var(--brass); }
.h-measure text { font: 500 13px var(--body); fill: #17130B; }
.h-phonepic { background: var(--paper-2); display: grid; place-items: center; }
.h-wa { position: absolute; top: 9%; inset-inline: 10%; z-index: 2; background: #D9FDD3; color: #111B21; border-radius: 12px 12px 12px 3px; padding: 10px 12px; font: 13px/1.35 var(--body); box-shadow: 0 10px 30px #00000026; }
.h-wa small { display: block; color: #54656F; }
.h-mini { position: relative; width: 52%; aspect-ratio: 9 / 19; margin-top: 18%; border-radius: 26px; padding: 6px; background: #0B0B0C; box-shadow: 0 20px 50px #00000040; }
.h-mini > div { position: relative; width: 100%; height: 100%; border-radius: 21px; overflow: hidden; }
.h-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.h-mini b { position: absolute; top: 14px; inset-inline: 12px; color: #fff; font: 700 calc(26px * var(--ds, 1))/1 var(--display); text-shadow: 0 2px 10px #000; }

/* 6. the invitation, the footer */
.h-invite { background: var(--night); padding-block: clamp(72px, 11vw, 140px); }
.h-box { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: end; border-top: 1px solid var(--line-n); padding-top: 40px; }
@media (max-width: 860px) { .h-box { grid-template-columns: 1fr; } }
.h-invite h2 { font: 700 calc(clamp(60px, 8vw, 124px) * var(--ds, 1))/.92 var(--display); }
.h-invite p { color: var(--smoke); font-size: 18px; margin-top: 18px; max-width: 32em; }
.h-foot { background: var(--night); border-top: 1px solid var(--line-n); padding-block: 26px 40px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; color: var(--smoke); font-size: 14px; }
.h-foot .h-word { font-size: 28px; color: var(--white); }

@media (max-width: 760px) {
  .h-nav nav { display: none; }
  .h-hero { min-height: 720px; }
  .h-hero::after, html[dir="ltr"] .h-hero::after { background: linear-gradient(to top, #0B0B0CF5 0%, #0B0B0CC0 46%, #0B0B0C30 72%), linear-gradient(to bottom, #0B0B0CA0 0%, #0B0B0C00 22%); }
  .h-hero > img { object-position: 62% 50%; }
  .h-ruler ul { gap: 6px 18px; font-size: 13px; }
}
body.home [hidden] { display: none !important; }
html[data-lang="he"] body.home [lang="en"] { display: none !important; }
html[data-lang="en"] body.home [lang="he"] { display: none !important; }

/* the live tour: the 3D hall over the poster render; the renders stay underneath as the fallback */
.h-canvas { position: absolute; inset: 0; }
.h-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.h-frame.h-live img { opacity: 0 !important; transition: none; }
.h-frame.h-loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, #0B0B0C00 30%, #F6F4EF14 50%, #0B0B0C00 70%) 0 0 / 300% 100%; animation: h-shine 1.4s linear infinite; pointer-events: none; }
@keyframes h-shine { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .h-frame.h-loading::after { animation: none; } }
.h-hint { all: unset; position: absolute; z-index: 2; inset-inline-end: 14px; bottom: 14px; padding: 9px 14px; border-radius: 999px; background: #0B0B0CC0; backdrop-filter: blur(6px); border: 1px solid #F6F4EF40; color: var(--white); font: 400 13px/1 var(--body); cursor: default; display: none; transition: opacity .4s; }
.h-frame.h-live .h-hint { display: inline-flex; }
.h-frame.h-live.h-touched:not(.h-turning) .h-hint, .h-frame.h-live.h-touched .h-hint { opacity: .55; }
@media (pointer: coarse) { .h-hint { cursor: pointer; border-color: var(--brass); color: var(--brass); } .h-frame.h-turning .h-hint { background: var(--brass); color: #17130B; opacity: 1; } }
.h-hint:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.h-frame.h-live .h-cap { max-width: calc(100% - 220px); }
@media (max-width: 760px) { .h-frame.h-live .h-cap { max-width: none; bottom: 58px; } }
@media (max-width: 760px) { .h-frame.h-live .h-cap { font-size: 12px; padding: 6px 10px; bottom: 56px; inset-inline-start: 10px; } .h-hint { inset-inline-end: 10px; bottom: 10px; } }