/* מסע מהלילה אל הדלת: הדף יורד מלילה (פתיחה) דרך דמדומים ונייר, אל דלת אור על חול בסוף */
:root{
  --night:#0E1230;
  --night2:#1A1E48;
  --dusk:#4B3B6E;
  --ember:#EE9A63;
  --glow:#FFF0D4;
  --sand:#E8CBA0;
  --paper:#F6EBD9;
  --ink:#191C3C;
  --ink2:#4A4668;
  --earth:#6E4529;
  --display:'Frank Ruhl Libre','David','Times New Roman',serif;
  --body:'Assistant','Segoe UI',Arial,sans-serif;
  --label:'Bellefair','Frank Ruhl Libre','David',serif;
  --gut:max(20px,env(safe-area-inset-left,0px));
  --gut-r:max(20px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--glow);font-family:var(--body);font-size:1.125rem;line-height:1.7;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--ember);outline-offset:4px;border-radius:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.label{font-family:var(--label);font-size:1.0625rem;letter-spacing:.14em;color:var(--ember);margin:0}
h1,h2,h3{font-family:var(--display);font-weight:900;margin:0;text-wrap:balance}
h2{font-size:clamp(2.4rem,6vw,4.25rem);line-height:1}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;border-radius:999px;font:700 1.0625rem/1 var(--body);text-decoration:none;border:1.5px solid currentColor;background:transparent;color:inherit;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn.glow{background:var(--glow);color:var(--night);border-color:var(--glow);box-shadow:0 0 0 0 rgba(255,220,170,0)}
.btn.glow:hover{box-shadow:0 10px 40px -6px rgba(255,214,160,.65)}
.btn.ink{background:var(--ink);color:var(--glow);border-color:var(--ink)}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translateX(-4px)}
.btn svg{width:18px;height:18px}

/* top bar */
.bar{position:fixed;top:0;inset-inline:0;z-index:20;padding-top:env(safe-area-inset-top,0px);transition:background .35s ease,box-shadow .35s ease}
.bar.solid{background:rgba(14,18,48,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,240,212,.08)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.brand{font-family:var(--display);font-weight:900;font-size:1.3rem;text-decoration:none;color:var(--glow);white-space:nowrap;padding-block:8px}
.brand b{color:var(--ember);font-weight:900}
.bar nav{display:flex;align-items:center;gap:28px}
.bar nav a{padding-block:10px;text-decoration:none;font-weight:600;font-size:1rem;color:rgba(255,240,212,.8)}
.bar nav a:hover{color:var(--glow)}
.bar nav .btn{min-height:42px;padding:0 20px;font-size:.95rem;color:var(--night)}
@media (max-width:760px){.bar nav a:not(.btn){display:none}}

/* hero: night */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--night) 0%,var(--night2) 58%,var(--dusk) 100%);padding-block:140px 110px}
#stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:56px}
.hero-text{display:flex;flex-direction:column;gap:28px;min-width:0}
.hero h1{font-size:clamp(4.2rem,12.5vw,10.5rem);line-height:.9;letter-spacing:-.01em}
.hero h1 span{display:block}
.hero h1 .hot{color:var(--ember);text-shadow:0 0 50px rgba(238,154,99,.45)}
.hero .sub{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.5;max-width:30rem;color:rgba(255,240,212,.86)}
.hero .kicker{margin:0;font-size:1.05rem;line-height:1.6;max-width:30rem;color:rgba(255,240,212,.62)}
.cover{position:relative;justify-self:center;width:100%;max-width:340px;perspective:1200px}
.cover::before{content:"";position:absolute;inset:-18% -30%;background:radial-gradient(closest-side,rgba(255,226,180,.38),rgba(255,226,180,0));z-index:0;animation:breathe 7s ease-in-out infinite}
.cover img{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:3px;transform:rotateY(10deg) rotateZ(-1.5deg);box-shadow:-30px 40px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,240,212,.08);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cover:hover img{transform:rotateY(0) rotateZ(0)}
.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-family:var(--label);letter-spacing:.2em;font-size:.9rem;color:rgba(255,240,212,.55);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue::after{content:"";width:1px;height:38px;background:linear-gradient(var(--glow),transparent);animation:drip 2.4s ease-in-out infinite}
@media (max-width:860px){
  .hero{padding-block:120px 96px}
  .hero .wrap{grid-template-columns:1fr;gap:48px}
  .cover{max-width:250px}
  .scroll-cue{display:none}
}

/* the whisper: dusk */
.whisper{background:linear-gradient(180deg,var(--dusk) 0%,#5E4677 100%);padding-block:120px 130px;text-align:center}
.whisper blockquote{margin:0 auto;max-width:19ch;font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,8vw,6.5rem);line-height:1.08;color:var(--glow)}
.whisper blockquote em{font-style:normal;color:var(--ember);display:block}
.whisper .label{margin-top:36px;color:rgba(255,240,212,.7)}

/* about: paper */
.about{background:var(--paper);color:var(--ink);padding-block:120px}
.about .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.about h2{font-size:clamp(2.6rem,6.5vw,5rem);line-height:.98}
.about h2 em{font-style:normal;color:#B5602C}
.about .label{color:#B5602C;margin-bottom:22px}
.about .text{display:flex;flex-direction:column;gap:22px;max-width:36rem;min-width:0}
.about .text p{margin:0;font-size:1.2rem;line-height:1.9}
.about .text p:first-child{font-family:var(--display);font-size:1.5rem;line-height:1.65;font-weight:500}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:20px;border-top:2px solid var(--ink)}
.facts div{padding:16px 0 0;display:flex;flex-direction:column;gap:2px}
.facts dt{font-family:var(--label);letter-spacing:.1em;font-size:.95rem;color:var(--ink2)}
.facts dd{margin:0;font-family:var(--display);font-weight:900;font-size:1.6rem;line-height:1.2}
@media (max-width:860px){.about .wrap{grid-template-columns:1fr;gap:40px}}
@media (max-width:520px){.facts{grid-template-columns:1fr}.facts div{padding:14px 0;border-bottom:1px solid rgba(25,28,60,.15)}}

/* quotes: sand */
.quotes{background:var(--sand);color:var(--ink);padding-block:110px 120px}
.quotes .head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:56px}
.quotes .label{color:#9A4E20}
.qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.qgrid figure{margin:0;padding-top:24px;border-top:2px solid var(--ink);display:flex;flex-direction:column;gap:22px;min-width:0}
.qgrid figure::before{content:"״";font-family:var(--display);font-weight:900;font-size:5rem;line-height:.6;color:#B5602C;height:.45em}
.qgrid blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.3}
.qgrid figcaption{font-family:var(--label);font-size:1.05rem;letter-spacing:.06em;color:var(--ink2);margin-top:auto}
.qgrid figure:nth-child(2){margin-top:64px}
.qgrid figure:nth-child(3){margin-top:128px}
@media (max-width:860px){.qgrid{grid-template-columns:1fr;gap:48px}.qgrid figure:nth-child(n){margin-top:0}}

/* letter */
.letter{background:linear-gradient(180deg,var(--sand) 0%,var(--paper) 100%);color:var(--ink);padding-block:40px 130px}
.sheet{position:relative;max-width:700px;margin:0 auto;background:#FFF9EE;padding:clamp(36px,6vw,72px) clamp(24px,6vw,76px);box-shadow:0 1px 0 rgba(25,28,60,.06),0 40px 80px -40px rgba(110,69,41,.45);transform:rotate(-.6deg)}
.sheet::before{content:"";position:absolute;top:-14px;right:50%;transform:translateX(50%) rotate(3deg);width:120px;height:28px;background:rgba(238,154,99,.35)}
.sheet h2{font-size:clamp(2rem,4.6vw,3rem);margin-bottom:28px}
.sheet p{margin:0 0 20px;font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1.9}
.sheet p.turn{font-weight:700;font-size:1.45rem;color:#9A4E20}
.sign{font-family:var(--display);font-weight:900;font-size:2.4rem;color:var(--ink);margin:12px 0 0}
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;padding-top:28px;border-top:1px solid rgba(25,28,60,.15)}
.social .btn{min-height:44px;padding:0 18px;font-size:.98rem;font-weight:600;border-width:1px}
.social .btn:hover{background:var(--ink);color:var(--glow)}

/* chapters: back to night */
.chapters{position:relative;background:var(--night);padding-block:130px;overflow:hidden}
.chapters::before{content:"";position:absolute;top:0;bottom:0;right:50%;width:2px;background:linear-gradient(180deg,transparent,rgba(255,226,180,.45) 20%,rgba(255,226,180,.45) 80%,transparent);transform:translateX(50%)}
.chapters .head{position:relative;text-align:center;margin-bottom:72px;display:flex;flex-direction:column;align-items:center;gap:18px}
.chapters .head p.lead{margin:0;max-width:32rem;color:rgba(255,240,212,.72);font-size:1.15rem}
.chapters h2{background:var(--night);padding-inline:24px}
.chapters ol{position:relative;list-style:none;margin:0 auto;padding:0;max-width:1000px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:120px;row-gap:6px;counter-reset:ch}
.chapters li{display:flex;align-items:baseline;gap:20px;padding:14px 0;border-bottom:1px solid rgba(255,240,212,.1);min-width:0}
.chapters .n{flex:0 0 2.4ch;font-family:var(--display);font-weight:900;font-size:2.6rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--ember);font-variant-numeric:tabular-nums;transition:color .3s ease,text-shadow .3s ease}
.chapters .t{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.35}
.chapters li:hover .n{color:var(--ember);text-shadow:0 0 24px rgba(238,154,99,.6)}
.chapters li.epi{grid-column:1/-1;justify-content:center;border-bottom:0;padding-top:36px}
.chapters li.epi .t{font-size:1.7rem;color:var(--ember)}
@media (max-width:760px){.chapters::before{right:auto;left:var(--gut)}.chapters ol{grid-template-columns:1fr}.chapters li.epi{justify-content:flex-start}}

/* the door */
.door-scene{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--night) 0%,#3A3466 45%,#7A5F86 100%);padding-block:120px 0;text-align:center}
.door-scene h2{font-size:clamp(2.2rem,6.2vw,4.6rem);line-height:1.12;max-width:16ch;margin:0 auto 56px}
.door-scene h2 span{color:var(--ember)}
.ground{--dh:clamp(300px,42vw,440px);padding-bottom:110px;background:linear-gradient(180deg,rgba(201,140,128,0) 0,#C98C80 calc(var(--dh)*.36),#EDC59A calc(var(--dh)*.58),#D8A574 calc(var(--dh)*.58),#B47A4C 100%)}
.door-wrap{position:relative;height:var(--dh)}
.door{position:absolute;bottom:42%;left:50%;width:clamp(78px,9vw,112px);aspect-ratio:1/1.85;transform:translateX(-50%);border:clamp(8px,1vw,11px) solid #24160E;border-bottom:0;background:linear-gradient(180deg,#FFF6E2,#FFE3B4);box-shadow:0 0 60px 20px rgba(255,226,170,.55),0 0 180px 80px rgba(255,214,160,.28);animation:breathe 6s ease-in-out infinite;z-index:2}
.beam{position:absolute;top:58%;left:50%;width:min(90%,700px);height:42%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,240,212,.95),rgba(255,240,212,.15));clip-path:polygon(43% 0,57% 0,82% 100%,30% 100%);transform-origin:top center;z-index:1}
.figure{position:absolute;bottom:4%;left:calc(50% + min(22vw,160px));width:14px;height:44px;z-index:2}
.figure::before{content:"";position:absolute;top:0;left:50%;width:12px;height:12px;border-radius:50%;background:#1A110B;transform:translateX(-50%)}
.figure::after{content:"";position:absolute;top:14px;left:0;width:14px;height:30px;background:#1A110B;border-radius:5px 5px 1px 1px}
.door-scene .btns{justify-content:center;position:relative;z-index:3;color:var(--ink)}
.door-scene .note{margin:22px 0 0;font-family:var(--label);letter-spacing:.1em;color:#2A1A10}

/* footer: the ground */
footer{background:#4E2F1B;color:rgba(255,240,212,.78);padding-block:34px calc(34px + env(safe-area-inset-bottom,0px));font-size:.98rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer a{color:var(--glow)}
footer nav{display:flex;gap:22px;flex-wrap:wrap}

/* contact + thanks */
.page-head{background:linear-gradient(180deg,var(--night),var(--night2) 70%,var(--dusk));padding-block:150px 160px;position:relative;overflow:hidden}
.page-head h1{font-size:clamp(3.6rem,11vw,8rem);line-height:.92}
.page-head p{margin:22px 0 0;max-width:34rem;font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.6;color:rgba(255,240,212,.85)}
.form-zone{background:var(--paper);color:var(--ink);padding-block:0 120px}
.form-card{position:relative;max-width:760px;margin:-90px auto 0;background:#FFF9EE;padding:clamp(28px,5vw,56px);box-shadow:0 40px 80px -40px rgba(14,18,48,.5);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 32px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-family:var(--label);letter-spacing:.1em;font-size:1rem;color:var(--ink2)}
.field input,.field textarea{font:500 1.2rem/1.5 var(--display);color:var(--ink);background:transparent;border:0;border-bottom:2px solid rgba(25,28,60,.25);border-radius:0;padding:8px 0;transition:border-color .25s ease;width:100%}
.field textarea{resize:vertical;min-height:150px}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:#B5602C}
.form-card .actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.form-card .actions small{color:var(--ink2);font-size:.95rem}
.hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
@media (max-width:640px){.form-card{grid-template-columns:1fr}}
.thanks{min-height:100vh;display:flex;flex-direction:column}
.thanks main{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding-block:140px 80px;background:linear-gradient(180deg,var(--night),var(--dusk) 70%,#B07A6E)}
.thanks .mini-door{width:70px;aspect-ratio:1/1.85;margin:0 auto 44px;border:8px solid #24160E;border-bottom:0;background:linear-gradient(180deg,#FFF6E2,#FFE3B4);box-shadow:0 0 50px 16px rgba(255,226,170,.5),0 0 140px 60px rgba(255,214,160,.22);animation:breathe 6s ease-in-out infinite}
.thanks h1{font-size:clamp(2.8rem,8vw,5.5rem);line-height:1}
.thanks p{margin:18px 0 36px;font-family:var(--display);font-size:1.4rem;color:rgba(255,240,212,.85)}
.thanks .btns{justify-content:center}

/* motion */
@keyframes breathe{0%,100%{opacity:.88;filter:brightness(1)}50%{opacity:1;filter:brightness(1.08)}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.js .rise{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.js .rise.in{opacity:1;transform:none}
.js .beam{transform:translateX(-50%) scaleY(0);transition:transform 1.8s cubic-bezier(.2,.7,.2,1) .3s}
.js .door-wrap.in .beam{transform:translateX(-50%) scaleY(1)}
.hero .rise:nth-child(2){transition-delay:.12s}.hero .rise:nth-child(3){transition-delay:.24s}.hero .rise:nth-child(4){transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rise{opacity:1;transform:none}
  .js .beam{transform:translateX(-50%)}
}