/* Invitation site — midnight typographic, Hebrew RTL, no external assets */
@font-face{
  font-family:"P Profesor";
  src:url("../fonts/Profesor-Regular.woff2") format("woff2");
  font-weight:100 600;
  font-style:normal;
  font-display:swap;
  size-adjust:86%;
}
@font-face{
  font-family:"P Profesor";
  src:url("../fonts/Profesor-Bold.woff2") format("woff2");
  font-weight:700 900;
  font-style:normal;
  font-display:swap;
  size-adjust:86%;
}
@font-face{
  font-family:"Ravitzky";
  src:url("../fonts/Ravitzky.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --navy:#0A1222;
  --window:#060b16;
  --ink:#14233F;
  --gold:#C9A55C;
  --lgold:#D9C08A;
  --dgold:#94732F;
  --cream:#F7F1E4;
  --cream-soft:#EFE6D4;
  --hair:rgba(201,165,92,.55);
  --muted:rgba(247,241,228,.72);
  --shadow:0 18px 40px rgba(0,0,0,.35);
  --radius:14px;
  --measure:26.5rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--navy);color:var(--cream);min-height:100%}
html{scroll-behavior:smooth}
body{
  font-family:"P Profesor",serif;
  direction:rtl;
  text-align:center;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  background:
    radial-gradient(ellipse 80% 45% at 50% 8%, rgba(201,165,92,.09), transparent 58%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(10,18,34,.0), rgba(0,0,0,.35)),
    var(--navy);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.skip{
  position:absolute;right:-999px;top:0;
  background:var(--gold);color:var(--navy);padding:.5rem 1rem;z-index:20;
}
.skip:focus{right:1rem}

/* Header */
.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.15rem calc(.4rem + env(safe-area-inset-top));
  max-width:44rem;margin:0 auto;
}
.bsd{
  font-weight:700;
  font-size:.95rem;
  color:var(--dgold);
  letter-spacing:.04em;
}
#musicBtn{
  display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--hair);
  color:var(--lgold);
  border-radius:999px;
  padding:.35rem .75rem .35rem .55rem;
  font-size:.85rem;
  letter-spacing:.04em;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
#musicBtn svg{width:1.05rem;height:1.05rem;fill:currentColor}
#musicBtn[aria-pressed="true"]{
  background:rgba(201,165,92,.16);
  border-color:var(--gold);
  color:var(--cream);
}
#musicBtn:hover,#musicBtn:focus-visible{
  border-color:var(--gold);
  background:rgba(201,165,92,.1);
  outline:none;
}

main{padding:0 1.15rem 3.5rem;max-width:44rem;margin:0 auto}

/* Hero + arch window */
.hero{padding-top:.4rem}
.arch-wrap{display:flex;flex-direction:column;align-items:center}
.arch-outer{
  width:min(68vw, 17.5rem);
  padding:7px;
  border:1px solid var(--hair);
  border-radius:50% 50% 1.15rem 1.15rem;
  background:transparent;
}
.arch{
  position:relative;
  width:100%;
  aspect-ratio:620/1102;
  border-radius:50% 50% 12px 12px;
  overflow:hidden;
  background:var(--window);
  border:2px solid var(--gold);
  box-shadow:0 10px 28px rgba(0,0,0,.4);
}
.arch img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.floor{
  width:min(78vw, 21rem);
  height:2px;
  margin:.85rem auto 1.5rem;
  background:linear-gradient(90deg, rgba(201,165,92,0), rgba(201,165,92,.7) 28%, rgba(201,165,92,.7) 72%, rgba(201,165,92,0));
}

h1{display:flex;flex-direction:column;align-items:center;gap:.15rem;margin:0}
.h-main,.h-sub{
  font-family:"Ravitzky",serif;
  font-weight:400;
  line-height:1.15;
  color:var(--cream);
}
.h-main{font-size:clamp(2.15rem, 8.2vw, 3.15rem)}
.h-sub{font-size:clamp(1.7rem, 6.4vw, 2.45rem);color:var(--lgold)}
.h-host{
  font-family:"Ravitzky",serif;
  font-weight:400;
  font-size:clamp(1.15rem, 4.4vw, 1.55rem);
  color:var(--cream);
  line-height:1.2;
  margin-top:.45rem;
  letter-spacing:.04em;
}

.divider{
  display:flex;align-items:center;justify-content:center;
  gap:10px;width:11.5rem;margin:1.15rem auto .95rem;
}
.divider .ln{flex:1;height:1.5px;background:var(--gold)}
.divider .dm{
  width:9px;height:9px;
  background:var(--gold);
  transform:rotate(45deg);
  flex:0 0 9px;
}

.date-he{
  font-family:"Ravitzky",serif;
  font-size:clamp(1.45rem, 5.4vw, 1.95rem);
  color:var(--gold);
  line-height:1.3;
}
.date-gr{
  font-family:"Ravitzky",serif;
  font-size:1.15rem;
  color:var(--cream);
  letter-spacing:.06em;
  margin-top:.2rem;
  opacity:.9;
}

/* Parchment sheet */
.sheet{
  margin:2rem auto 0;
  max-width:var(--measure);
  background:var(--cream);
  color:var(--ink);
  border-radius:var(--radius);
  border:1.5px solid var(--gold);
  box-shadow:var(--shadow);
  padding:1.45rem 1.2rem 1.5rem;
  position:relative;
}
.sheet::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(110,80,30,.16), transparent 8%, transparent 92%, rgba(110,80,30,.16));
}
.sheet p{
  font-size:clamp(1.05rem, 3.8vw, 1.2rem);
  line-height:1.7;
}
.sheet p + p{margin-top:.15rem}

/* Countdown */
.count{margin:2.1rem auto 0;max-width:var(--measure);padding-bottom:calc(1.2rem + env(safe-area-inset-bottom))}
.count-label{
  color:var(--dgold);
  letter-spacing:.18em;
  font-size:.82rem;
  margin-bottom:.85rem;
}
.count-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.55rem;
  direction:ltr;
}
.count-cell{
  border:1px solid var(--hair);
  border-radius:12px;
  background:rgba(6,11,22,.45);
  padding:.7rem .15rem .65rem;
}
.count-cell .n{
  display:block;
  font-family:"Ravitzky",serif;
  font-size:clamp(1.45rem, 6vw, 2rem);
  color:var(--lgold);
  line-height:1.1;
  direction:ltr;
  font-variant-numeric:tabular-nums;
}
.count-cell .l{
  display:block;
  margin-top:.25rem;
  font-size:.75rem;
  color:var(--muted);
  letter-spacing:.04em;
}
.count.is-live .count-grid{display:none}
.live-msg{display:none;color:var(--lgold);font-family:"Ravitzky",serif;font-size:1.35rem}
.count.is-live .live-msg{display:block}

/* Stations — compact cubes, 3 in a row even on mobile */
.stops{margin:1.85rem auto 0;max-width:none;text-align:center}
.stops h2,.cal-head{
  font-family:"Ravitzky",serif;
  font-size:1.55rem;
  font-weight:400;
  color:var(--lgold);
  margin-bottom:.7rem;
}
.stops-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.4rem;
  align-items:stretch;
}
.card{
  background:rgba(247,241,228,.035);
  border:1.5px solid var(--gold);
  border-radius:12px;
  padding:.6rem .28rem .5rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
}
.card-time{
  font-family:"Ravitzky",serif;
  font-size:1.05rem;
  color:var(--gold);
  line-height:1;
  direction:ltr;
  unicode-bidi:isolate;
}
.card-title{
  font-family:"Ravitzky",serif;
  font-size:.78rem;
  color:var(--cream);
  margin-top:.28rem;
  line-height:1.2;
  font-weight:400;
}
.card-place{
  color:var(--lgold);
  font-size:.62rem;
  margin-top:.18rem;
  line-height:1.3;
}
.card-actions{
  display:flex;gap:.28rem;justify-content:center;flex-wrap:nowrap;
  margin-top:auto;
  padding-top:.4rem;
}
.icon-btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;
  width:auto;min-width:2.15rem;
  padding:0;
  border:0;
  color:var(--lgold);
  text-decoration:none;
  flex:0 0 auto;
  background:transparent;
}
.icon-btn svg{
  width:2.05rem;height:2.05rem;
  padding:.42rem;
  box-sizing:border-box;
  fill:currentColor;
  border:1px solid var(--gold);
  border-radius:50%;
  transition:background .25s ease, color .25s ease;
}
.icon-btn span{
  font-size:.52rem;
  line-height:1;
  letter-spacing:0;
  color:var(--muted);
}
.icon-btn:hover svg,.icon-btn:focus-visible svg{
  background:rgba(201,165,92,.16);
  color:var(--cream);
}
.icon-btn:hover,.icon-btn:focus-visible{color:var(--cream);outline:none}
.icon-btn:hover span,.icon-btn:focus-visible span{color:var(--lgold)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:2.55rem;
  padding:.4rem 1rem;
  border-radius:999px;
  text-decoration:none;
  font-size:.95rem;
  border:1.5px solid var(--gold);
  color:var(--lgold);
  transition:background .25s ease, color .25s ease;
}
.btn svg{width:1.05rem;height:1.05rem;fill:currentColor;flex:0 0 auto}
.btn:hover,.btn:focus-visible{
  background:rgba(201,165,92,.14);
  color:var(--cream);
  outline:none;
}
.btn-gold{
  background:var(--gold);
  color:var(--navy);
  border-color:var(--gold);
  font-weight:700;
}
.btn-gold:hover,.btn-gold:focus-visible{
  background:var(--lgold);
  color:var(--navy);
}

/* Calendar */
.cal{margin:2.3rem auto 0;max-width:var(--measure)}
.cal-actions{display:flex;flex-direction:column;gap:.55rem;align-items:stretch}
.cal-actions .btn{width:100%}

/* Signature */
.sig{margin:2rem auto 0;max-width:var(--measure)}
.closing{
  color:var(--lgold);
  font-size:1.05rem;
  margin-bottom:.25rem;
}
.hosts{
  font-family:"Ravitzky",serif;
  font-size:clamp(1.55rem, 5.6vw, 2rem);
  color:var(--cream);
  line-height:1.3;
}
.logo{
  width:11.5rem;
  margin:1.15rem auto 0;
  height:auto;
}

/* Motion */
.fade{
  animation:fadeUp .8s ease both;
}
.d1{animation-delay:.08s}
.d2{animation-delay:.18s}
.d3{animation-delay:.3s}
.d4{animation-delay:.42s}
.d5{animation-delay:.54s}
.d6{animation-delay:.66s}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .fade{animation:none}
  html{scroll-behavior:auto}
}

@media (min-width:720px){
  .top,main{max-width:40rem}
  .arch-outer{width:16.5rem}
  .floor{margin:.7rem auto 1.15rem}
  .sheet{padding:1.7rem 1.7rem 1.8rem}
  .cal-actions{flex-direction:row}
  .cal-actions .btn{width:auto;flex:1}
  .stops-grid{gap:.7rem}
  .card{padding:.85rem .5rem .7rem;border-radius:14px}
  .card-time{font-size:1.35rem}
  .card-title{font-size:.95rem}
  .card-place{font-size:.78rem}
  .icon-btn svg{width:2.2rem;height:2.2rem}
  .icon-btn span{font-size:.6rem}
}