/* מלי-לק: couture editorial. Giant letters, arch collage, full-screen stacking chapters that slide over each other, floating pearls and ribbons. */
:root {
  --blush: #F7E1DC; --cream: #FFF7F2; --rose: #E9A6A6; --plum: #4A1D3D; --plum-d: #2a0f24; --gold: #C9A24B; --wine: #8E1B3A; --mut: #7A5A6E;
  --accent: var(--gold); --line: rgba(74, 29, 61, .18); --hdr-bg: rgba(255, 247, 242, .88);
  --pad: clamp(1.25rem, 5vw, 4.5rem); --serif: "Suez One", "Times New Roman", serif; --sans: "Heebo", system-ui, sans-serif;
  --loader-bg: var(--blush); --loader-fg: var(--plum);
}
body { background: var(--cream); color: var(--plum); font: 300 1.0625rem/1.75 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; } em { font-style: normal; color: var(--wine); } i { font-style: normal; }
.tag { font-size: .8rem; letter-spacing: .25em; color: var(--gold); font-weight: 500; margin-bottom: 1.2rem; } .tag::before { content: ""; display: inline-block; width: 2.2rem; height: 1px; background: currentColor; vertical-align: middle; margin-inline-end: .8rem; }
.loader { align-content: center; justify-items: center; } .loader-brand { font-family: var(--serif); } .loader-brand i, .brand span { color: var(--gold); margin-inline: .1em; }
.loader-stroke { position: absolute; bottom: 22%; width: min(60vw, 520px); height: 40px; } .loader-stroke path { stroke-dasharray: 700; stroke-dashoffset: 700; animation: pen 1.6s ease-out forwards; } @keyframes pen { to { stroke-dashoffset: 0; } }
/* centered-logo header */
.site-header { display: grid; grid-template-columns: 1fr auto 1fr; } .site-header nav ul { gap: clamp(1rem, 3vw, 2.2rem); } .nav-r ul { justify-content: flex-end; } .nav-l ul { justify-content: flex-start; }
.brand { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.4rem); } .site-header li a { font-size: .92rem; } .nav-cta { border: 1px solid var(--plum); padding: .45rem 1.2rem; border-radius: 99px; transition: .3s; } .nav-cta:hover { background: var(--plum); color: var(--cream); }
.btn { display: inline-block; border: 0; cursor: pointer; background: var(--plum); color: var(--cream); font: 400 1.02rem var(--sans); padding: 1rem 2.4rem; border-radius: 99px; will-change: transform; transition: background .3s; } .btn:hover { background: var(--wine); }
.link { border-bottom: 1px solid var(--gold); padding-block: .2rem; }
.fab { position: fixed; z-index: 190; bottom: 1.2rem; inset-inline-end: 1.2rem; width: clamp(84px, 8vw, 110px); filter: drop-shadow(0 12px 22px rgba(74, 29, 61, .3)); } .fab svg { width: 100%; display: block; background: var(--blush); border-radius: 50%; }

/* floating decor */
.pearl { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #fff, #F1D5D5 55%, #D8A9A9); box-shadow: 0 8px 18px rgba(74, 29, 61, .25); } .pearl.p2 { width: 22px; height: 22px; }
.ribbon { width: 90px; height: 18px; border-radius: 18px; background: linear-gradient(90deg, var(--gold), #F3DDA6, var(--gold)); transform: rotate(-24deg); animation: sway 5s ease-in-out infinite; opacity: .9; } .ribbon.r2 { width: 60px; height: 12px; background: linear-gradient(90deg, var(--rose), #F7C9CF); } @keyframes sway { 50% { transform: rotate(14deg) translateX(14px); } }
.petal, .pt { width: 18px; height: 26px; border-radius: 90% 0 90% 0; background: linear-gradient(135deg, #F7C9CF, #E58FA1); } .petal { animation: spin 9s linear infinite; } .petal.pt2 { width: 26px; height: 36px; animation-direction: reverse; }

/* hero */
.hero { position: relative; min-height: 100svh; padding: 8rem var(--pad) 5rem; display: grid; align-content: center; justify-items: center; text-align: center; overflow: hidden; background: radial-gradient(60% 60% at 18% 22%, #fff, transparent 70%), linear-gradient(160deg, var(--blush), #F3D3CF); }
.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .pt { position: absolute; top: -40px; opacity: .85; } .pt:nth-child(1) { left: 8%; } .pt:nth-child(2) { left: 20%; scale: .8; } .pt:nth-child(3) { left: 33%; scale: 1.2; } .pt:nth-child(4) { left: 47%; } .pt:nth-child(5) { left: 60%; scale: .9; } .pt:nth-child(6) { left: 72%; scale: 1.3; } .pt:nth-child(7) { left: 84%; } .pt:nth-child(8) { left: 93%; scale: .8; }
.arch { position: absolute; width: clamp(110px, 18vw, 260px); aspect-ratio: 3 / 4; z-index: 1; } .arch i { display: block; width: 100%; height: 100%; border-radius: 999px 999px 24px 24px; background: linear-gradient(160deg, var(--g1), var(--g2)); box-shadow: 0 30px 60px rgba(74, 29, 61, .2); border: 6px solid rgba(255, 255, 255, .6); animation: bobv 7s ease-in-out infinite; }
.a1 { --g1: #F2B6B6; --g2: #C75B7A; top: 14%; inset-inline-start: 6%; } .a2 { --g1: #F3DDA6; --g2: #C9A24B; bottom: 8%; inset-inline-start: 18%; width: clamp(90px, 13vw, 190px); } .a2 i { animation-delay: -2s; } .a3 { --g1: #CDB4E2; --g2: #8F6CB5; top: 10%; inset-inline-end: 8%; width: clamp(100px, 15vw, 220px); } .a3 i { animation-delay: -4s; }
.circ { position: absolute; bottom: 10%; inset-inline-end: 12%; width: clamp(90px, 13vw, 190px); aspect-ratio: 1; z-index: 1; } .circ i { display: block; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #fff 0 6%, transparent 7%), radial-gradient(circle at 36% 32%, #E9A6A6, #8E1B3A); box-shadow: 0 24px 50px rgba(74, 29, 61, .3); animation: bobv 6s ease-in-out infinite; }
.badge { position: absolute; z-index: 3; top: 20%; inset-inline-end: 24%; width: clamp(100px, 11vw, 160px); }
.giant { position: relative; z-index: 2; display: flex; font-size: clamp(7rem, 26vw, 28rem); line-height: .9; margin-bottom: 1rem; color: var(--plum); }
.ltr { display: inline-block; will-change: transform; } .ltr.dot { color: var(--gold); }
.hero-sub { position: relative; z-index: 2; color: var(--mut); font-size: clamp(1.1rem, 1.6vw, 1.35rem); margin-bottom: 1.8rem; } .hero-acts { position: relative; z-index: 2; display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; justify-content: center; }

/* stacking chapters: sticky cards that scale and dim as the next one covers them */
.chapters { position: relative; }
.card { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--pad); padding: 6rem var(--pad) 3rem; background: var(--bg); color: var(--fg); overflow: hidden; border-radius: 40px 40px 0 0; box-shadow: 0 -30px 60px rgba(0, 0, 0, .12); transform-origin: 50% 0; }
.cd-txt h2 { font-size: clamp(2.8rem, 6.4vw, 6.4rem); margin-bottom: 1rem; } .card em { color: inherit; opacity: .62; } .cd-txt p:not(.tag) { max-width: 38ch; opacity: .85; } .card .tag { color: currentColor; opacity: .75; }
.menu { margin-top: 1.6rem; max-width: 26rem; } .menu li { display: flex; justify-content: space-between; padding: .65rem 0; border-bottom: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 30%, transparent); } .menu b { font-weight: 500; }
.cd-num { position: absolute; top: 5.4rem; inset-inline-end: var(--pad); font-family: var(--serif); font-size: clamp(5rem, 12vw, 11rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px currentColor; opacity: .35; direction: ltr; }
.cd-art { position: relative; height: 70%; order: 2; } .cd-art > i { position: absolute; display: block; }
.nail { width: clamp(70px, 9vw, 130px); height: clamp(110px, 14vw, 200px); border-radius: 50% 50% 22% 22% / 62% 62% 18% 18%; background: linear-gradient(160deg, #E58FA1, #B0284F); box-shadow: inset -10px 0 18px rgba(0, 0, 0, .14), 0 24px 36px rgba(74, 29, 61, .3); } .nail::after { content: ""; position: absolute; top: 8%; inset-inline-start: 18%; width: 22%; height: 55%; border-radius: 50%; background: rgba(255, 255, 255, .65); }
.n1 { left: 14%; top: 18%; rotate: -10deg; } .n2 { left: 40%; top: 4%; rotate: 8deg; background: linear-gradient(160deg, #F0C0A0, #C98A5E); } .n3 { left: 62%; top: 26%; rotate: -4deg; background: linear-gradient(160deg, #B79ADB, #7F5CAE); }
.lash { width: 260px; height: 130px; border: 8px solid #FFF7F2; border-color: #FFF7F2 transparent transparent; border-radius: 50%; } .l1 { left: 8%; top: 20%; rotate: -8deg; } .l2 { left: 34%; top: 44%; rotate: 6deg; width: 220px; opacity: .7; } .eye { right: 12%; top: 8%; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, #1E1A1D 0 22%, #C9A24B 24% 40%, #FFF7F2 42%); box-shadow: 0 20px 40px rgba(0, 0, 0, .3); }
.drop { border-radius: 50% 0 50% 50%; rotate: 45deg; background: radial-gradient(circle at 30% 30%, #fff 0 10%, transparent 11%), linear-gradient(135deg, #F2D9C4, #C8946A); box-shadow: 0 20px 36px rgba(59, 36, 24, .25); } .d1 { left: 12%; top: 16%; width: 120px; height: 120px; } .d2 { left: 46%; top: 6%; width: 80px; height: 80px; } .d3 { left: 36%; top: 48%; width: 150px; height: 150px; }
.orbit { left: 50%; top: 50%; border: 1px solid var(--gold); border-radius: 50%; } .o1 { width: 340px; height: 340px; margin: -170px 0 0 -170px; animation: spin 22s linear infinite; } .o2 { width: 230px; height: 230px; margin: -115px 0 0 -115px; border-style: dashed; animation: spin 14s linear infinite reverse; } .o1::after, .o2::after { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 16px var(--gold); } .gem { left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px; background: linear-gradient(135deg, #F3DDA6, var(--gold)); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); animation: tumble 12s linear infinite; }

/* gallery collage */
.gallery { position: relative; z-index: 1; background: var(--cream); padding: clamp(5rem, 10vw, 9rem) var(--pad) clamp(3rem, 6vw, 6rem); }
.g-head h2 { font-size: clamp(2.6rem, 6vw, 5.6rem); max-width: 12ch; margin-bottom: .6rem; } .g-note { color: var(--mut); font-size: .85rem; }
.collage { position: relative; height: clamp(760px, 110vw, 1180px); margin-top: 2rem; }
.cl { position: absolute; width: var(--w); height: var(--h); border-radius: var(--r); background: var(--g); box-shadow: 0 30px 60px rgba(74, 29, 61, .18); overflow: hidden; display: grid; place-items: center; margin: 0; } .cl > i { position: relative; display: block; }
.cl .nail { width: 70px; height: 108px; } .cl .lash { width: 170px; height: 86px; border-color: #fff transparent transparent; } .cl .drop { width: 90px; height: 90px; }

.voices { position: relative; z-index: 1; padding: clamp(6rem, 12vw, 10rem) var(--pad); background: var(--plum); color: var(--cream); text-align: center; overflow: hidden; }
.v-ring { position: absolute; left: 50%; top: 50%; width: min(90vw, 900px); aspect-ratio: 1; margin: calc(min(90vw, 900px) / -2); border: 1px dashed rgba(201, 162, 75, .5); border-radius: 50%; animation: spin 60s linear infinite; }
.voices blockquote { position: relative; max-width: 54rem; margin: 0 auto 3rem; } .voices blockquote p { font-family: var(--serif); font-size: clamp(1.9rem, 4.4vw, 3.8rem); line-height: 1.25; } .voices .w { display: inline-block; } .voices footer { margin-top: 1.4rem; color: var(--gold); } .voices small { opacity: .7; }
.stats { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 4rem; } .stats strong { display: block; direction: ltr; unicode-bidi: isolate; font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 7vw, 6rem); line-height: 1; color: var(--gold); } .stats span { opacity: .75; }

.book { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); padding: clamp(5rem, 10vw, 9rem) var(--pad); background: var(--blush); }
.b-copy h2 { font-size: clamp(2.8rem, 6.4vw, 6rem); margin-bottom: 1rem; } .b-copy > p:not(.tag) { color: var(--mut); max-width: 34ch; }
.details { margin-top: 2rem; display: grid; gap: 1rem; } .details div { border-top: 1px solid var(--gold); padding-top: .7rem; } .details dt { font-size: .75rem; letter-spacing: .15em; color: var(--gold); } .details dd { margin: 0; }
.form { display: grid; gap: 1.2rem; align-content: start; } .form > label { display: grid; gap: .35rem; font-size: .9rem; color: var(--mut); }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .chips legend { font-size: .9rem; color: var(--mut); margin-bottom: .5rem; padding: 0; } .chips label { cursor: pointer; } .chips input { position: absolute; opacity: 0; pointer-events: none; } .chips span { display: inline-block; padding: .5rem 1.2rem; border: 1px solid var(--plum); border-radius: 99px; transition: .3s; } .chips input:checked + span { background: var(--plum); color: var(--cream); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(74, 29, 61, .25); } .chips input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.form input[name="name"], .form input[name="phone"] { font: 300 1.05rem var(--sans); color: var(--plum); background: transparent; border: 0; border-bottom: 1px solid var(--plum); padding: .7rem 0; border-radius: 0; width: 100%; } .form input[name="name"]:focus, .form input[name="phone"]:focus { outline: 0; border-color: var(--gold); box-shadow: 0 1px 0 var(--gold); } .form input[aria-invalid="true"] { border-color: var(--wine); } .form .btn { justify-self: start; } .form-note { min-height: 1.4em; color: var(--wine); }
.site-footer { position: relative; z-index: 1; background: var(--plum-d); color: rgba(255, 247, 242, .6); padding: clamp(3rem, 8vw, 7rem) var(--pad) 2rem; overflow: hidden; font-size: .85rem; } .wordmark { overflow: hidden; line-height: .95; margin-bottom: 2rem; } .wordmark span { display: block; text-align: center; font-family: var(--serif); font-size: clamp(5rem, 24vw, 22rem); background: linear-gradient(90deg, var(--gold), #F3DDA6, var(--rose), var(--gold)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7s linear infinite; } @keyframes shimmer { to { background-position: -250% 0; } }
.motion-toggle { border-radius: 99px; border-color: var(--plum); bottom: 1rem; inset-inline-start: 1rem; }
@media (max-width: 860px) {
  .site-header { grid-template-columns: auto 1fr; } .nav-l { display: none; } .nav-r ul { justify-content: flex-end; } .arch, .badge { opacity: .55; } .giant { font-size: 30vw; }
  .card { grid-template-columns: 1fr; height: auto; min-height: 100svh; position: relative; } .cd-art { order: 0; height: 200px; } .cd-num { display: none; }
  .collage { height: auto; display: grid; gap: 1.5rem; } .cl { position: relative; left: auto !important; top: auto !important; width: 100%; } .book { grid-template-columns: 1fr; }
}

/* a11y: text-safe gold on light backgrounds */
:root { --gold-t: #7E5F18; }
.tag, .details dt { color: var(--gold-t); }
.voices { --w-dim: #B79BB0; --w-lit: #FFF7F2; }
.voices .tag { color: var(--gold); }