/* IMFPB · Join page (single centred column) */
.join-page{background:#12454F}
.jbar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gut)}
.jbrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font:600 14px/1 var(--sans);letter-spacing:.24em}
.jbrand img{width:44px;height:auto}
.jbar nav{display:flex;align-items:center;gap:18px}
.jlink{color:#D7E7EA;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px;transition:color .3s,border-color .3s}
.jlink:hover{color:#fff;border-color:#F7C948}
.jig{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.25);color:#fff;transition:background .3s,border-color .3s}
.jig:hover{background:rgba(255,255,255,.1);border-color:#F7C948}

.jpage{padding:clamp(90px,11vw,140px) var(--gut) clamp(80px,10vw,120px);display:flex;flex-direction:column;align-items:center;text-align:center}
.jpage .ribbons{opacity:.5}
.jpage>*:not(.ribbons){position:relative;z-index:2;width:100%}

/* compact intro */
.jintro{max-width:900px}
.jpage .kicker{justify-content:center;margin-bottom:14px}
.jpage .kicker:before{content:"";width:40px;height:1px;background:rgba(255,255,255,.2)}
.jpage .kicker:after{width:40px}
.jpage .kicker span{font-size:13px;color:#F7C948}
.jpage h1,.jpage h2{font-size:clamp(36px,4.6vw,60px);line-height:1.02;letter-spacing:-.015em;color:#fff;margin:0 0 14px;text-wrap:balance}
.jlead{max-width:620px;margin:0 auto;color:#D7E7EA;font-size:clamp(16px,1.4vw,18px);line-height:1.6}
.jdates{list-style:none;margin:22px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.jdates li{display:flex;align-items:baseline;gap:9px;padding:9px 16px;border-radius:40px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.jdates span{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#9FC4CC}
.jdates span:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.jdates b{font:400 16px/1.2 var(--serif);color:#fff}

/* the form takes centre stage */
.jform{max-width:820px;margin-top:clamp(30px,4vw,44px);text-align:left}
.jform .join-form{padding:clamp(24px,4vw,52px) clamp(20px,4.4vw,56px);border-radius:18px;box-shadow:0 40px 100px rgba(0,0,0,.32)}
.jform .rsvp .q{font-size:clamp(28px,3.2vw,40px)}
.jform .rsvp .line{font-size:clamp(20px,2.2vw,26px)}
@media (min-width:760px){.jform .tiles{grid-template-columns:repeat(3,1fr)}}
.jform .alt-form{text-align:center;margin-top:14px}

/* graphics: a fanned set of the Instagram posts */
.jposts{max-width:1180px;margin-top:clamp(64px,8vw,100px)}
.jposts .eyebrow{color:#F7C948;margin-bottom:clamp(24px,3vw,36px)}
.fan{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:flex-start}
.fan .card{flex:0 0 clamp(170px,22vw,270px);margin:0 clamp(-26px,-1.8vw,-12px);transition:transform .6s var(--ease),z-index 0s .3s;transform-origin:50% 100%}
.fan .card a{display:block;border-radius:14px;overflow:hidden;background:#FBFAF5;box-shadow:0 26px 60px rgba(0,0,0,.35);border:4px solid #FBFAF5}
.fan .card img{display:block;width:100%;height:auto;aspect-ratio:1122/1402;object-fit:cover}
.fan .c1{transform:rotate(-7deg) translateY(26px);z-index:1}
.fan .c2{transform:rotate(-2.5deg) translateY(4px);z-index:2}
.fan .c3{transform:rotate(2.5deg) translateY(4px);z-index:3}
.fan .c4{transform:rotate(7deg) translateY(26px);z-index:2}
.fan .card:hover{transform:rotate(0) translateY(-14px) scale(1.04);z-index:5;transition:transform .5s var(--ease),z-index 0s}
.jg-cta{margin-top:clamp(48px,6vw,70px)}
.igbtn{background:var(--rainbow);color:#fff;box-shadow:0 14px 36px rgba(0,0,0,.25)}
.igbtn:hover{transform:translateY(-2px)}

.join-page .foot{background:#FBFAF5}
.join-page .foot-social a{vertical-align:middle}

@media (prefers-reduced-motion:no-preference){
  @keyframes jrise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  .join-page .jintro,.join-page .jform{animation:jrise 1s var(--ease) both}
  .join-page .jform{animation-delay:.15s}
}

@media (max-width:760px){
  .join-page .jpage{padding-top:88px}
  .jdates li{padding:7px 12px}
  .jdates b{font-size:15px}
  .fan{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;max-width:420px;margin:0 auto;padding:0 8px}
  .fan .card{margin:0;flex:none}
  .fan .c1{transform:rotate(-3deg)}.fan .c2{transform:rotate(2deg) translateY(10px)}
  .fan .c3{transform:rotate(-2deg)}.fan .c4{transform:rotate(3deg) translateY(10px)}
}
@media (max-width:560px){
  .jlink{display:none}
  .jdates{gap:8px}
  .jdates li{flex-direction:column;align-items:center;gap:2px;border-radius:14px}
}

/* home page variant */
.jpage .kicker span{font-family:var(--serif);font-size:18px;letter-spacing:0;color:var(--pink)}
.join-page .jpage .kicker span{font-family:inherit;font-size:13px;color:#F7C948}
