/* LUNÉ — "הירח של התאריך שלך" (moon.html). New file.
   Uses css/style.css read-only for the shared header / logo / footer; everything else is styled here.
   Palette only: ink #0F1013, graphite #1C1D21, platinum #B9BCC2, porcelain #E9E7E1, pearl #F5F4F0, muted #5B5F67 */
.moon-page{
  --m-ink:#0F1013;--m-graphite:#1C1D21;--m-platinum:#B9BCC2;--m-porcelain:#E9E7E1;--m-pearl:#F5F4F0;--m-muted:#5B5F67;
  --m-hair:rgba(185,188,194,.22);
  --m-serif:'Frank Ruhl Libre',serif;--m-display:'Bodoni Moda',serif;--m-sans:'Assistant',sans-serif;
  margin:0;background:var(--m-pearl);color:var(--m-ink);font-family:var(--m-sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
.moon-page h1,.moon-page h2,.moon-page h3{font-family:var(--m-serif);font-weight:300;margin:0;line-height:1.1}
.m-eyebrow{margin:0;font-size:12px;letter-spacing:.36em;color:var(--m-muted)}
.m-num{font-family:var(--m-display);font-feature-settings:'lnum'}

/* header, footer and cart: the shop's own markup and css/style.css rules (same as product.html) */

/* buttons (own copy so this page does not depend on the shop's button rules) */
.mbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border:1px solid var(--m-ink);background:var(--m-ink);color:var(--m-pearl);font-family:var(--m-sans);font-size:15px;font-weight:600;letter-spacing:.06em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.mbtn:hover{background:var(--m-graphite)}
.mbtn[disabled]{opacity:.6;cursor:progress}
.mbtn--outline{background:transparent;color:var(--m-ink);font-weight:400}
.mbtn--outline:hover{background:var(--m-porcelain)}
.mbtn__ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.mbtn:focus-visible,.mlink:focus-visible,.mpick__img:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- hero: the moon ---------- */
.mhero{position:relative;overflow:hidden;background:var(--m-ink);color:var(--m-pearl)}
.mhero__stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mhero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"intro moon" "read moon";column-gap:72px;padding-top:88px;padding-bottom:96px}
.mintro{grid-area:intro;display:flex;flex-direction:column;gap:22px;max-width:520px;align-self:end}
.mintro .m-eyebrow{color:var(--m-platinum)}
.mintro h1{font-size:clamp(44px,5.2vw,76px);line-height:1.04}
.mintro__lead{margin:0;max-width:440px;font-size:18px;line-height:1.75;font-weight:300;color:var(--m-platinum)}

.mform{display:flex;flex-direction:column;gap:22px;margin-top:8px}
.mfield label{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.3em;color:var(--m-platinum)}
.mfield label span{letter-spacing:.04em}
.mfield__row{display:flex;align-items:flex-end;gap:20px;max-width:420px}
.mform input{display:block;width:100%;max-width:420px;min-height:54px;padding:6px 0;border:0;border-bottom:1px solid rgba(185,188,194,.5);border-radius:0;background:transparent;color:var(--m-pearl);font-family:var(--m-sans);font-size:18px;color-scheme:dark;outline:none;transition:border-color .2s,box-shadow .2s}
.mform input::placeholder{color:rgba(185,188,194,.6)}
.mform input:focus-visible{border-bottom-color:var(--m-pearl);box-shadow:0 1px 0 0 var(--m-pearl)}
.mform input[type=date]{flex:1 1 auto;min-width:0;font-family:var(--m-display);font-size:26px;letter-spacing:.06em;direction:ltr;text-align:right}
.mform input[type=date]::-webkit-calendar-picker-indicator{opacity:.75;cursor:pointer}
.mform input[aria-invalid=true]{border-bottom-color:var(--m-pearl)}
.mfield__err{margin:8px 0 0;font-size:14px;color:var(--m-pearl)}
.mlink{flex:none;min-height:44px;padding:0 4px;border:0;background:none;color:var(--m-pearl);font-family:var(--m-sans);font-size:14px;letter-spacing:.08em;text-decoration:underline;text-underline-offset:6px;cursor:pointer}

.mmoon{grid-area:moon;align-self:center;margin:0;display:flex;flex-direction:column;align-items:center}
/* the canvas fades in over a plain CSS disc, so the page paints before the moon's surface is computed.
   Disc = the drawn moon: radius 343 of a 1040 canvas (65.96%). */
.mmoon__stage{position:relative;width:100%;max-width:620px;aspect-ratio:1/1}
.mmoon__stage::before{content:"";position:absolute;inset:17.02%;border-radius:50%;background:radial-gradient(circle at 36% 34%,rgba(185,188,194,.16),rgba(185,188,194,.05) 55%,rgba(185,188,194,.02) 72%),var(--m-graphite);box-shadow:0 0 60px rgba(245,244,240,.05);animation:m-breathe 2.4s ease-in-out infinite alternate;transition:opacity .6s .45s}
.mmoon__stage canvas{position:relative;display:block;width:100%;height:100%;opacity:0;transition:opacity .7s ease}
.mmoon__stage.is-ready canvas{opacity:1}
.mmoon__stage.is-ready::before{opacity:0;animation-play-state:paused}
@keyframes m-breathe{from{filter:brightness(.75)}to{filter:brightness(1.2)}}
.mmoon figcaption{margin-top:-6%;font-size:12px;letter-spacing:.3em;color:var(--m-platinum)}

.mread{grid-area:read;align-self:start;max-width:520px;margin-top:44px;padding-top:30px;border-top:1px solid var(--m-hair)}
.mread__date{margin:0;font-family:var(--m-display);font-size:20px;letter-spacing:.22em;color:var(--m-platinum);direction:ltr;text-align:right}
.mread__phase{margin-top:8px;font-size:clamp(40px,4.4vw,60px)}
/* filled by js/moon.js, so they are not headings (an empty <h2> in the static HTML) but keep the heading type */
.moon-page p.mread__phase,.moon-page p.mpick__name{font-family:var(--m-serif);font-weight:300;line-height:1.1;margin-bottom:0}
.moon-page p.mpick__name{margin-top:0;font-size:clamp(36px,4vw,54px)}
.mread__heb{margin:10px 0 0;font-family:var(--m-serif);font-size:24px;color:var(--m-porcelain)}
.mread__facts{display:flex;gap:56px;margin:26px 0 0}
.mread__facts div{display:flex;flex-direction:column;gap:2px}
.mread__facts dt{font-size:12px;letter-spacing:.3em;color:var(--m-platinum)}
.mread__facts dd{margin:0;font-size:28px;line-height:1.3}
.mread__facts dd:not(.m-num){font-family:var(--m-serif);font-weight:300}
.mread__note{margin:24px 0 0;max-width:440px;font-size:13px;line-height:1.7;color:var(--m-platinum)}

/* ---------- the matching piece ---------- */
.mpick{padding:110px 0;background:var(--m-pearl)}
.mpick[hidden]{display:none}
.mpick__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:80px;align-items:center}
.mpick__img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--m-pearl)}
.mpick__img img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mpick__img:hover img{transform:scale(1.03)}
.mpick__txt{display:flex;flex-direction:column;gap:18px;max-width:500px}
.mpick__phase{display:flex;align-items:center;gap:12px}
.mpick__icon{width:28px;height:28px;flex:none;border-radius:50%;background:var(--m-ink)} /* ink coin so the lit limb reads on pearl */
.mpick h2{font-size:clamp(36px,4vw,54px)}
.mpick__why{margin:0;font-size:18px;line-height:1.8;color:var(--m-muted)}
.mpick__spec{margin:4px 0 0;padding-top:16px;border-top:1px solid var(--m-porcelain);display:flex;flex-direction:column;gap:6px;font-size:15px}
.mpick__spec div{display:grid;grid-template-columns:56px 1fr;gap:12px}
.mpick__spec dt{color:var(--m-muted)}
.mpick__spec dd{margin:0}
.mpick__price{margin:0;font-size:30px}
.mpick__cta{display:flex;flex-wrap:wrap;gap:12px}
.mpick__fine{margin:0;font-size:13px;line-height:1.7;color:var(--m-muted)}

/* ---------- exports ---------- */
.mexport{padding:110px 0;background:var(--m-porcelain)}
.mexport__head{max-width:560px;margin-bottom:44px}
.mexport__head h2{margin-top:12px;font-size:clamp(34px,3.8vw,48px)}
.mexp__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.mexp{display:flex;flex-direction:column;align-items:center;gap:16px;padding:44px 32px;background:var(--m-pearl);text-align:center}
.mexp__preview{height:500px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.mexp__story{display:block;height:100%;width:auto;aspect-ratio:9/16;box-shadow:0 18px 40px rgba(15,16,19,.16)}
.mexp h3{font-size:28px}
.mexp>p{margin:0;max-width:340px;font-size:15px;color:var(--m-muted)}
.mexp .mbtn{margin-top:auto;min-width:220px}
.mexp>p{margin-bottom:8px}

/* A6 card: 105 x 148 units. On screen 1u = 3.2px, in print 1u = 1mm */
.pcard{--u:3.2px;box-sizing:border-box;width:calc(105*var(--u));height:calc(148*var(--u));display:flex;flex-direction:column;align-items:center;padding:calc(9*var(--u)) calc(8*var(--u)) calc(7*var(--u));background:var(--m-pearl);color:var(--m-ink);text-align:center;box-shadow:0 18px 40px rgba(15,16,19,.12);overflow:hidden}
:where(.pcard) p{margin:0}
.pcard__brand{display:flex;align-items:center;justify-content:center;direction:ltr;line-height:1}
.pcard__brand img{display:block;height:calc(6.4*var(--u));width:auto}
.pcard__win{width:calc(68*var(--u));height:calc(68*var(--u));margin-top:calc(6*var(--u));background:var(--m-ink);flex:none}
.pcard__win canvas{display:block;width:100%;height:100%}
.pcard__phase{margin-top:calc(6*var(--u));font-family:var(--m-serif);font-weight:300;font-size:calc(8*var(--u));line-height:1.1}
.pcard__date{margin-top:calc(2.4*var(--u));font-family:var(--m-display);font-size:calc(4.2*var(--u));letter-spacing:.14em;direction:ltr}
.pcard__heb{margin-top:calc(1.2*var(--u));font-family:var(--m-serif);font-size:calc(4*var(--u))}
.pcard__illum{margin-top:calc(1*var(--u));font-size:calc(3*var(--u));letter-spacing:.06em;color:var(--m-muted)}
.pcard__words{margin-top:calc(3*var(--u));font-family:var(--m-serif);font-size:calc(4.6*var(--u));line-height:1.25}
.pcard__words[hidden]{display:none}
.pcard__foot{margin-top:auto;font-size:calc(2.5*var(--u));letter-spacing:.05em;color:var(--m-muted)}


/* ---------- mobile ---------- */
@media (max-width:1024px){
  .mhero__grid{column-gap:40px}
  .mpick__grid{gap:48px}
  .pcard{--u:2.9px}
  .mexp__preview{height:450px}
}
@media (max-width:820px){
  .mhero__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "moon" "read";padding-top:40px;padding-bottom:56px}
  .mintro{gap:16px}
  .mintro h1{font-size:44px}
  .mintro__lead{font-size:16px}
  .mform{gap:18px}
  .mmoon{margin:4px calc(-1*var(--gut,20px)) 0}
  .mmoon__stage{max-width:none}
  .mread{margin-top:22px;padding-top:24px}
  .mread__phase{font-size:42px}
  .mread__heb{font-size:22px}
  .mread__facts{gap:40px}
  .mpick,.mexport{padding:64px 0}
  .mpick__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .mpick__why{font-size:16px}
  .mpick__cta .mbtn{flex:1 1 100%}
  .mexport__head{margin-bottom:28px}
  .mexp__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .mexp{padding:32px 20px}
  .mexp__preview{height:440px}
  .mexp .mbtn{width:100%}
}
@media (max-width:380px){
  .pcard{--u:2.7px}
  .mexp__preview{height:410px}
}

/* ---------- print: only the A6 card ---------- */
@media print{
  @page{size:105mm 148mm;margin:0}
  html,body.moon-page{margin:0;padding:0;background:var(--m-pearl);overflow:visible}
  .moon-page .sr,.moon-page header,.moon-page footer,.moon-page .announce,.moon-page .scrim,.moon-page .drawer,.moon-page .toast,.moon-page dialog,.mhero,.mpick,.mexport__head,.mexp--story,.mexp--card>:not(.mexp__preview){display:none !important}
  .mexport,.mexport .wrap,.mexp__grid,.mexp--card,.mexp__preview{display:block !important;margin:0 !important;padding:0 !important;height:auto !important;max-width:none !important;background:none !important;box-shadow:none !important}
  .pcard{--u:1mm;height:147.6mm;box-shadow:none;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion:reduce){.mpick__img img,.mmoon__stage canvas,.mmoon__stage::before{transition:none}.mmoon__stage::before{animation:none}}