/* yanivalush personal site: cream paper, app burgundy, muted gold */
:root{
  --paper:#FBF6EC; --paper2:#F5EDDD; --line:#E5D9C3; --grid:rgba(155,27,46,.045);
  --ink:#22160F; --soft:#54463A; --muted:#7A6A55;
  --bordo:#9B1B2E; --bordo-d:#4A1020; --night:#1A070C; --gold:#C8A35A; --gold-l:#E8C872; --cream:#F4E6C4;
  --serif:'Frank Ruhl Libre', 'David Libre', 'Times New Roman', serif;
  --sans:Heebo, 'Arial Hebrew', Arial, sans-serif;
  color-scheme:light;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; overflow-x:clip; }
body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:26px 26px; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--bordo); outline-offset:3px; border-radius:6px; }
h1,h2,h3{ text-wrap:balance; }
.wrap{ max-width:1160px; margin:0 auto; padding-inline:20px; }
.skip{ position:absolute; right:12px; top:-60px; z-index:100; background:var(--bordo); color:#fff; padding:10px 16px; border-radius:10px; text-decoration:none; }
.skip:focus{ top:12px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* reveal: visible at rest; only content below the first screen fades in */
.rv{ transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.rv.pre{ opacity:0; transform:translateY(26px); }
.rv.d1{ transition-delay:.12s } .rv.d2{ transition-delay:.24s } .rv.d3{ transition-delay:.36s }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .rv, .rv.pre{ opacity:1; transform:none; transition:none; } }

.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:14px; letter-spacing:.16em; color:var(--bordo); font-weight:500; }
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold); }
h2{ font-family:var(--serif); font-weight:400; font-size:40px; line-height:1.15; margin:12px 0 0; letter-spacing:-.01em; }
.underline{ width:64px; height:2px; background:linear-gradient(90deg,var(--gold),var(--gold-l)); margin:18px 0 0; border-radius:2px; }

.btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:14px; font-size:16px; font-weight:500; color:#fff; text-decoration:none; border:0; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,#B4283D,#7E1424); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 0 #5A0E1A, 0 10px 22px rgba(155,27,46,.22); transition:transform .2s, box-shadow .2s; }
.btn:hover{ transform:translateY(-1px); }
.btn.ghost{ color:var(--ink); background:linear-gradient(180deg,#fff,#F3EBDD); box-shadow:inset 0 1px 0 #fff, 0 1px 0 var(--line), 0 6px 16px rgba(60,30,10,.07); border:1px solid var(--line); }
.btn.gold{ color:#2A0A13; background:linear-gradient(180deg,#F0D48A,#C8A35A); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 #8E6F30, 0 10px 24px rgba(200,163,90,.3); }
.btn.sm{ padding:10px 16px; font-size:15px; }
.btn .arr{ font-size:12px; opacity:.8; }

/* floating pill header */
.hdr{ position:fixed; top:calc(12px + env(safe-area-inset-top, 0px)); left:12px; right:12px; z-index:40; display:flex; justify-content:center; pointer-events:none; }
.pill-nav{ pointer-events:auto; width:100%; max-width:1160px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 10px 9px 14px; border-radius:18px;
  background:rgba(251,246,236,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); box-shadow:0 8px 30px rgba(60,30,10,.08); transition:max-width .5s; }
.hdr.small .pill-nav{ max-width:560px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.brand b{ font-family:var(--serif); font-weight:500; font-size:21px; }
.links{ display:none; gap:24px; font-size:15px; color:var(--soft); }
.links a{ text-decoration:none; } .links a:hover{ color:var(--bordo); }
.menu-btn{ width:44px; height:44px; border-radius:12px; border:0; cursor:pointer; display:grid; place-items:center; background:linear-gradient(180deg,#B4283D,#7E1424); box-shadow:inset 0 1px 0 rgba(255,255,255,.28); }
.menu-btn i{ display:block; width:17px; height:1.5px; background:#fff; box-shadow:0 5px 0 #fff, 0 -5px 0 #fff; }
.drawer{ position:fixed; inset:0; z-index:39; background:rgba(251,246,236,.97); backdrop-filter:blur(8px); display:flex; flex-direction:column; justify-content:center; gap:6px; padding:90px 30px 40px; }
.drawer a{ font-family:var(--serif); font-size:30px; text-decoration:none; padding:8px 0; border-bottom:1px solid var(--line); }
.drawer .btn{ font-family:var(--sans); font-size:17px; border:0; margin-top:18px; justify-content:center; }

/* hero */
.hero{ position:relative; overflow:hidden; padding:140px 0 40px; }
.glow{ position:absolute; top:-180px; left:50%; width:900px; height:620px; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%, rgba(232,200,114,.85), rgba(232,200,114,.35) 38%, rgba(251,246,236,0) 70%); }
.dots{ position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(155,27,46,.13) 1px, transparent 1px); background-size:7px 7px;
  -webkit-mask-image:radial-gradient(ellipse 60% 45% at 50% 0%, #000, transparent 75%); mask-image:radial-gradient(ellipse 60% 45% at 50% 0%, #000, transparent 75%); }
.hero h1{ position:relative; font-family:var(--serif); font-weight:400; font-size:38px; line-height:1.24; letter-spacing:-.01em; margin:0 0 24px; }
.hero h1 .me{ display:inline-block; vertical-align:middle; width:54px; height:54px; border-radius:50%; overflow:hidden; border:3px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.18); margin:0 4px; position:relative; top:-4px; }
.hero h1 .me img{ width:100%; height:100%; object-fit:cover; }
.hero h1 em{ font-style:normal; color:var(--bordo); }
.hero .sub{ position:relative; font-size:17px; color:var(--soft); margin:0 0 28px; max-width:560px; }
.actions{ position:relative; display:flex; gap:10px; flex-wrap:wrap; }
.trust{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:52px; background:rgba(251,246,236,.7); }
.trust div{ padding:18px 8px; text-align:center; min-width:0; }
.trust div + div{ border-right:1px solid var(--line); }
.trust b{ display:block; font-family:var(--serif); font-weight:400; font-size:32px; line-height:1.1; color:var(--bordo); }
.trust span{ font-size:13px; color:var(--muted); line-height:1.4; display:block; margin-top:4px; }

section{ padding:80px 0; position:relative; scroll-margin-top:80px; }

/* offers */
.grid{ display:grid; gap:16px; margin-top:34px; }
.offer{ border:1px solid var(--line); border-radius:24px; padding:6px; background:#fff; box-shadow:0 2px 0 var(--line), 0 20px 40px rgba(60,30,10,.06); display:flex; flex-direction:column; }
.offer .img{ position:relative; height:230px; border-radius:19px; overflow:hidden; background:var(--paper2); }
.offer .img > img.cover{ width:100%; height:100%; object-fit:cover; }
.offer .img.dark{ background:radial-gradient(circle at 50% 30%, #6a1828, #2a0a12 75%); }
.offer .img.dark img{ position:absolute; left:50%; top:22px; transform:translateX(-50%); height:310px; width:auto; max-width:none; border-radius:22px; box-shadow:0 0 0 5px #0b0305, 0 20px 40px rgba(0,0,0,.5); }
.offer .img.book{ display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 40%, #FFF6DF, #EADBBF); }
.offer .img.book img{ width:120px; border-radius:2px 5px 5px 2px; box-shadow:16px 20px 34px rgba(60,30,10,.35), 3px 5px 9px rgba(60,30,10,.25); transform:rotate(-4deg); }
.offer .img.book.r img{ transform:rotate(4deg); }
.tag{ position:absolute; top:12px; right:12px; z-index:2; font-size:12px; font-weight:500; padding:3px 11px; border-radius:9px; background:rgba(255,255,255,.94); color:var(--bordo); }
.offer .body{ padding:18px 16px 16px; display:flex; flex-direction:column; flex:1; }
.offer h3{ font-family:var(--serif); font-weight:500; font-size:26px; margin:0 0 6px; line-height:1.2; }
.offer p{ margin:0 0 14px; color:var(--soft); font-size:15px; }
.meta{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; color:var(--muted); margin:0 0 16px; padding:0; list-style:none; }
.meta li::before{ content:'◆'; color:var(--gold); font-size:8px; margin-left:6px; position:relative; top:-2px; }
.offer .row{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.price{ font-family:var(--serif); font-size:21px; }
.price small{ font-family:var(--sans); font-size:12px; color:var(--muted); }

/* night */
.night{ background:radial-gradient(ellipse 80% 60% at 50% 35%, #4A1020, #2A0A13 55%, var(--night)); color:var(--cream); padding:110px 0 120px;
  border-radius:50% 50% 0 0 / 70px 70px 0 0; margin-top:20px; }
.night::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:70px; background:var(--paper); border-radius:50% 50% 0 0 / 70px 70px 0 0; }
.night .eyebrow{ color:var(--gold-l); }
.night h2{ color:var(--cream); } .night h2 em{ font-style:normal; color:var(--gold-l); }
.night p{ color:#DCCDAE; font-size:17px; max-width:520px; }
.night .inner{ display:grid; gap:50px; align-items:center; }
.steps{ list-style:none; padding:0; margin:26px 0 34px; }
.steps li{ display:flex; gap:16px; padding:14px 0; border-bottom:1px solid rgba(200,163,90,.25); color:#EADBC0; }
.steps b{ font-family:var(--serif); color:var(--gold-l); min-width:22px; font-weight:400; }
.phone{ justify-self:center; width:250px; aspect-ratio:9/18.5; max-width:100%; border-radius:40px; padding:9px; background:#070203; box-shadow:0 0 0 1px rgba(200,163,90,.4), 0 40px 90px rgba(0,0,0,.6), 0 0 90px rgba(232,200,114,.15); }
.phone img{ width:100%; height:100%; object-fit:cover; border-radius:31px; }

/* story */
.portrait{ height:360px; border-radius:24px; overflow:hidden; margin:0 0 30px; border:6px solid #fff; box-shadow:0 20px 50px rgba(60,30,10,.12); }
.portrait img{ width:100%; height:100%; object-fit:cover; object-position:40% 30%; }
.prose p{ font-family:var(--serif); font-size:20px; line-height:1.8; margin:0 0 18px; color:#3A2D22; max-width:62ch; }
.prose.drop p:first-child::first-letter{ float:right; font-size:84px; line-height:.82; margin:8px 0 0 12px; color:var(--bordo); font-weight:500; }

.quote{ text-align:center; padding:60px 0 80px; }
.quote blockquote{ margin:0; font-family:var(--serif); font-weight:300; font-size:44px; line-height:1.3; }
.quote cite{ display:block; margin-top:18px; font-style:normal; font-size:14px; color:var(--muted); letter-spacing:.06em; }

.tile{ position:relative; display:block; height:420px; border-radius:26px; overflow:hidden; margin-top:30px; box-shadow:0 24px 50px rgba(60,30,10,.15); text-decoration:none; color:#fff; }
.tile > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
.tile:hover > img{ transform:scale(1.03); }
.tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,7,12,0) 30%, rgba(26,7,12,.9)); }
.tile .cap{ position:absolute; z-index:2; bottom:24px; right:22px; left:22px; }
.tile small{ color:var(--gold-l); font-size:14px; letter-spacing:.14em; }
.tile h3{ font-family:var(--serif); font-weight:400; font-size:36px; margin:4px 0 6px; line-height:1.1; }
.tile p{ margin:0 0 14px; font-size:15px; color:#EADBC0; max-width:460px; }
.tile .more{ font-size:15px; border-bottom:1px solid var(--gold-l); padding-bottom:2px; }

.closing{ text-align:center; padding:100px 0 50px; }
.closing h2{ font-size:52px; } .closing h2 em{ font-style:normal; color:var(--bordo); }
.closing p{ color:var(--soft); margin:14px auto 28px; max-width:440px; }
.contact{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.chip{ display:inline-flex; align-items:center; gap:14px; padding:12px 16px; border:1px solid var(--line); border-radius:14px; background:#fff; font:inherit; font-size:16px; color:inherit; cursor:pointer; box-shadow:0 6px 16px rgba(60,30,10,.06); }
.chip .mail{ direction:ltr; }
.chip .lbl{ color:var(--bordo); font-size:13px; }
.social{ display:flex; justify-content:center; gap:10px; margin-top:22px; }
.social a{ width:48px; height:48px; display:grid; place-items:center; border-radius:13px; border:1px solid var(--line); background:linear-gradient(180deg,#fff,#F3EBDD); color:var(--soft); }
.social svg{ width:20px; height:20px; fill:currentColor; }
footer{ border-top:1px solid var(--line); padding:22px 0 34px; font-size:14px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; }
footer nav{ display:flex; gap:16px; flex-wrap:wrap; } footer a{ text-decoration:none; } footer a:hover{ color:var(--bordo); }

/* inner pages */
.page-head{ padding:150px 0 30px; position:relative; overflow:hidden; }
.page-head h1{ font-family:var(--serif); font-weight:400; font-size:44px; line-height:1.15; margin:12px 0 0; position:relative; }
.page-head .lead{ position:relative; color:var(--soft); font-size:18px; max-width:620px; margin:16px 0 0; }
.back{ display:inline-flex; gap:8px; margin-top:24px; font-size:15px; color:var(--bordo); text-decoration:none; position:relative; }
.article{ padding:20px 0 60px; }
.article h2{ font-size:30px; margin:40px 0 12px; }
.article ul{ font-family:var(--serif); font-size:19px; color:#3A2D22; padding-right:22px; }
.callout{ font-family:var(--serif); font-size:26px; line-height:1.5; border-right:3px solid var(--gold); padding:6px 22px; margin:30px 0; color:var(--ink); max-width:62ch; }
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:30px 0; }
.gallery img{ width:100%; height:180px; object-fit:cover; border-radius:16px; }
.legal p, .legal li{ font-family:var(--sans); font-size:16px; color:var(--soft); }

@media (min-width:900px){
  .links{ display:flex; } .menu-btn{ display:none; }
  .hdr.small .links{ display:none; } .hdr.small .menu-btn{ display:grid; }
  .hero{ padding:200px 0 60px; } .hero h1{ font-size:70px; max-width:1000px; } .hero h1 .me{ width:84px; height:84px; top:-6px; } .hero .sub{ font-size:19px; }
  .trust b{ font-size:44px; } .trust span{ font-size:14px; }
  h2{ font-size:56px; }
  .grid{ grid-template-columns:repeat(4,1fr); } .offer .img{ height:250px; }
  .night{ border-radius:50% 50% 0 0 / 120px 120px 0 0; padding:170px 0 180px; } .night::after{ height:120px; border-radius:50% 50% 0 0 / 120px 120px 0 0; }
  .night .inner{ grid-template-columns:1.15fr .85fr; } .phone{ width:300px; }
  .story .inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start; } .portrait{ height:560px; margin:0; }
  .quote blockquote{ font-size:76px; }
  .tile{ height:560px; } .tile .cap{ right:44px; bottom:44px; } .tile h3{ font-size:56px; }
  .closing h2{ font-size:84px; }
  .page-head{ padding:200px 0 40px; } .page-head h1{ font-size:64px; }
  .gallery{ grid-template-columns:repeat(3,1fr); } .gallery img{ height:240px; }
}