// Page — Membership
// By invitation only. No pricing. Goal: push the reader toward the contact form.

const MembershipPage = () => {
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  const C = "var(--epa-charcoal)";
  const ink = "var(--epa-paper-ivory)";

  return (
    <div style={{background:C, color:ink, width:"100%", minHeight:"100%",
      fontFamily:"var(--font-ui)"}}>

      <SiteNav current="membership"/>

      {/* HERO */}
      <section style={{position:"relative", height:780, padding:"0 80px",
        display:"flex", alignItems:"center", justifyContent:"center", textAlign:"center",
        overflow:"hidden"}}>
        <div style={{position:"absolute", inset:0}}>
          <Photo tone="gold" h="100%"/>
          <div style={{position:"absolute", inset:0,
            background:"linear-gradient(180deg, rgba(15,10,6,.55) 0%, rgba(15,10,6,.9) 100%)"}}/>
        </div>
        <div style={{position:"relative", maxWidth:900}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:32}}>— Chapitre 01 · Private Circle</div>
          <h1 style={{font:"400 104px/1.02 var(--font-display)", letterSpacing:".01em",
            margin:"0 0 28px"}}>
            A seat<br/>
            <em style={{color:"var(--epa-champagne)"}}>at the atelier.</em>
          </h1>
          <div style={{display:"flex", justifyContent:"center", marginBottom:28}}>
            <Arabesque w={200}/>
          </div>
          <p style={{font:"italic 300 20px/1.55 var(--font-editorial)",
            color:ink, margin:"0 auto", maxWidth:680}}>
            The Private Circle is our membership — closed, small by design,
            and by invitation only. Names on file, preferences remembered,
            a dedicated concierge on call day and night.
          </p>
        </div>
      </section>

      {/* TWO-PATH INTRO */}
      <section style={{padding:"140px 120px", background:C}}>
        <div style={{textAlign:"center", marginBottom:80}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:20}}>— Chapitre 02 · Two paths</div>
          <h2 style={{font:"400 64px/1.05 var(--font-display)",
            letterSpacing:".02em", margin:"0 0 22px"}}>
            Two ways to engage<br/><em style={{color:"var(--epa-champagne)"}}>the atelier.</em>
          </h2>
          <p style={{font:"italic 300 18px/1.5 var(--font-editorial)",
            color:"var(--epa-text-secondary)", margin:"0 auto", maxWidth:620}}>
            Request by request, or under retainer. Both at the same tariff.
            Members are served first.
          </p>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:40,
          maxWidth:1100, margin:"0 auto"}}>

          {/* Pay as you go */}
          <Reveal d={.05} y={24} threshold={0.12}>
          <div id="pay-as-you-go" style={{position:"relative",
            background:"rgba(26,18,11,.5)",
            border:"1px solid rgba(170,135,87,.2)",
            padding:"56px 48px",
            transition:"transform .5s cubic-bezier(.22,.61,.36,1), border-color .4s",
            cursor:"default"}}
            onMouseEnter={e=>{e.currentTarget.style.transform="translateY(-4px)";e.currentTarget.style.borderColor="rgba(212,175,125,.4)"}}
            onMouseLeave={e=>{e.currentTarget.style.transform="translateY(0)";e.currentTarget.style.borderColor="rgba(170,135,87,.2)"}}>
            <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
              letterSpacing:".3em", textTransform:"uppercase", marginBottom:16}}>À la carte</div>
            <h3 style={{font:"400 48px/1 var(--font-display)",
              letterSpacing:".02em", margin:"0 0 12px"}}>Pay as you go</h3>
            <div style={{font:"italic 400 17px/1 var(--font-editorial)",
              color:"var(--epa-champagne)", marginBottom:24}}>No retainer · No commitment</div>
            <Arabesque w={60}/>
            <p style={{font:"400 15px/1.65 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:"22px 0 32px"}}>
              Engage the atelier one request at a time. Fully transparent,
              at the same tariff as our members — without a retainer.
              Right for a first arrangement, or for clients whose needs are occasional.
            </p>
            <ul style={{listStyle:"none", padding:0, margin:"0 0 40px"}}>
              {[
                "Open to any request",
                "Member-equal tariff",
                "Quotation before confirmation",
                "24-hour response time",
                "20% service charge",
                "No commitment"
              ].map(f => (
                <li key={f} style={{display:"flex", alignItems:"center", gap:12,
                  font:"400 14px/1.4 var(--font-ui)", color:ink,
                  padding:"12px 0", borderTop:"1px solid rgba(170,135,87,.12)"}}>
                  <i data-lucide="check" style={{width:14, height:14,
                    color:"var(--epa-gold)", strokeWidth:1.4}}/>{f}
                </li>
              ))}
            </ul>
            <HairlineBtn size="md" href="request-access.html">Make a request</HairlineBtn>
          </div>
          </Reveal>

          {/* Private Circle — featured */}
          <Reveal d={.2} y={24} threshold={0.12}>
          <div style={{position:"relative",
            background:"linear-gradient(180deg,#2a1e14,#1a120b)",
            border:"1px solid var(--epa-gold-dark)",
            padding:"56px 48px",
            transition:"transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s",
            cursor:"default",
            boxShadow:"0 0 0 rgba(0,0,0,0)"}}
            onMouseEnter={e=>{e.currentTarget.style.transform="translateY(-4px)";e.currentTarget.style.boxShadow="0 32px 60px -20px rgba(0,0,0,.75)"}}
            onMouseLeave={e=>{e.currentTarget.style.transform="translateY(0)";e.currentTarget.style.boxShadow="0 0 0 rgba(0,0,0,0)"}}>
            <div style={{position:"absolute", top:-1, right:-1,
              background:"var(--epa-gold)", color:"var(--epa-charcoal)",
              font:"500 10px/1 var(--font-ui)", letterSpacing:".24em",
              textTransform:"uppercase", padding:"10px 16px"}}>By invitation</div>

            <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
              letterSpacing:".3em", textTransform:"uppercase", marginBottom:16}}>Membership</div>
            <h3 style={{font:"400 48px/1 var(--font-display)",
              letterSpacing:".02em", margin:"0 0 12px"}}>Private Circle</h3>
            <div style={{font:"italic 400 17px/1 var(--font-editorial)",
              color:"var(--epa-champagne)", marginBottom:24}}>Annual · Renewed on review</div>
            <Arabesque w={60}/>
            <p style={{font:"400 15px/1.65 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:"22px 0 32px"}}>
              A seat at the atelier. Standing preferences on file, a dedicated
              concierge, and priority over non-members on every booking.
              Limited by design — closed between one hundred fifty and two hundred members.
            </p>
            <ul style={{listStyle:"none", padding:0, margin:"0 0 40px"}}>
              {[
                "Dedicated concierge",
                "Standing preferences on file",
                "Priority over non-members",
                "Complimentary upgrades (when available)",
                "10% service charge",
                "0% on hotel bookings",
                "Introductions within the Circle"
              ].map(f => (
                <li key={f} style={{display:"flex", alignItems:"center", gap:12,
                  font:"400 14px/1.4 var(--font-ui)", color:ink,
                  padding:"12px 0", borderTop:"1px solid rgba(170,135,87,.12)"}}>
                  <i data-lucide="check" style={{width:14, height:14,
                    color:"var(--epa-gold)", strokeWidth:1.4}}/>{f}
                </li>
              ))}
            </ul>
            <HairlineBtn filled size="md" href="#invitation">Request an invitation</HairlineBtn>
          </div>
          </Reveal>
        </div>
      </section>

      {/* WHAT YOU RECEIVE — layered editorial plates */}
      <section style={{padding:"160px 120px 180px",
        background:"radial-gradient(ellipse at 50% 0%, #221710 0%, #140D08 55%, #0B0703 100%)",
        borderTop:"1px solid rgba(170,135,87,.22)", position:"relative", overflow:"hidden"}}>

        {/* faint gilt border frame */}
        <div style={{position:"absolute", inset:"60px 80px", pointerEvents:"none",
          border:"1px solid rgba(170,135,87,.1)",
          boxShadow:"inset 0 0 120px rgba(0,0,0,.5)"}}/>
        {/* corner flourishes on frame */}
        {[["60px","80px","0deg"],["60px","auto","90deg","80px"],
          ["auto","80px","270deg",null,"60px"],["auto","auto","180deg","80px","60px"]].map((c,i)=>(
          <div key={i} style={{position:"absolute",
            top:c[0], left:c[1]==="auto"?undefined:c[1], right:c[3], bottom:c[4],
            transform:`rotate(${c[2]})`, opacity:.35, pointerEvents:"none"}}>
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
              <path d="M1 1 L1 10 M1 1 L10 1 M1 1 Q6 6 10 10" stroke="var(--epa-gold)" strokeWidth=".7" fill="none"/>
            </svg>
          </div>
        ))}

        <div style={{textAlign:"center", marginBottom:96, position:"relative"}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:22}}>— Chapitre 03 · Privileges</div>
          <h2 style={{font:"400 68px/1.05 var(--font-display)",
            letterSpacing:".02em", margin:"0 0 20px"}}>
            What the Circle <em style={{color:"var(--epa-champagne)"}}>receives.</em>
          </h2>
          <div style={{display:"flex", justifyContent:"center", margin:"24px 0 0"}}>
            <Arabesque w={120}/>
          </div>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:36,
          maxWidth:1400, margin:"0 auto", position:"relative"}}>
          {[
            {n:"I",   t:"Two concierges, day & night",
              lede:"One atelier, two voices — working in relay so you are never out of reach.",
              body:"A senior concierge leads your account by day; a night concierge takes the desk from nine in the evening to nine in the morning, Paris time. Both know your preferences, your schedule, and the names of those travelling with you. One call, one message, any hour — a human answers.",
              meta:"24h · Paris · London · New York"},
            {n:"II",  t:"Priority, always",
              lede:"Tables, suites, upgrades, closed events. Members come first.",
              body:"When availability is scarce — a first night at a three-star, a suite during Couture Week, a box at the opera — your requests sit at the top of the brief. Our partners know the Circle by name, and reserve capacity we then quietly distribute among our members.",
              meta:"Preferred-partner status · 280 houses"},
            {n:"III", t:"Standing preferences",
              lede:"Rehearsed once, remembered always — across all three cities.",
              body:"Your coffee at Le Bristol. Your driver in Milan. Your seat at Le Cinq, and the champagne you prefer poured before you arrive. Every standing arrangement is noted in your dossier and honoured by the atelier, whichever concierge happens to take your call.",
              meta:"Private dossier · reviewed yearly"}
          ].map((p,idx) => (
            <Reveal key={p.n} d={idx*.15} y={26} threshold={0.12}>
            <article style={{
              position:"relative",
              background:"linear-gradient(180deg, #1D140C 0%, #130C07 100%)",
              border:"1px solid rgba(170,135,87,.28)",
              borderRadius:"2px",
              padding:"64px 44px 56px",
              textAlign:"center",
              transition:"transform .55s cubic-bezier(.22,.61,.36,1), border-color .4s",
              cursor:"default",
              boxShadow:`
                0 1px 0 rgba(212,175,125,.18) inset,
                0 -1px 0 rgba(0,0,0,.6) inset,
                0 32px 60px -20px rgba(0,0,0,.75),
                0 8px 18px -6px rgba(0,0,0,.6),
                0 2px 0 rgba(0,0,0,.4)
              `
            }}
              onMouseEnter={e=>{e.currentTarget.style.transform="translateY(-6px)";e.currentTarget.style.borderColor="rgba(212,175,125,.5)"}}
              onMouseLeave={e=>{e.currentTarget.style.transform="translateY(0)";e.currentTarget.style.borderColor="rgba(170,135,87,.28)"}}>
              {/* inner gilt rule frame */}
              <div style={{position:"absolute", inset:14,
                border:"1px solid rgba(170,135,87,.14)", pointerEvents:"none"}}/>

              {/* wax-seal medallion */}
              <div style={{
                width:86, height:86, margin:"0 auto 32px",
                borderRadius:"50%",
                background:"radial-gradient(circle at 35% 30%, #E8CFA0 0%, #C9A871 35%, #8B6530 75%, #4A3418 100%)",
                boxShadow:`
                  0 1px 2px rgba(255,230,180,.4) inset,
                  0 -4px 10px rgba(0,0,0,.5) inset,
                  0 10px 24px -6px rgba(0,0,0,.7),
                  0 3px 8px rgba(0,0,0,.5)
                `,
                display:"flex", alignItems:"center", justifyContent:"center",
                position:"relative"
              }}>
                {/* outer engraved ring */}
                <div style={{position:"absolute", inset:6, borderRadius:"50%",
                  border:"1px solid rgba(60,38,15,.55)",
                  boxShadow:"0 0 0 1px rgba(255,225,170,.2) inset"}}/>
                <div style={{font:"300 36px/1 var(--font-editorial)",
                  color:"#3A2610",
                  textShadow:"0 1px 0 rgba(255,230,180,.45), 0 -1px 1px rgba(0,0,0,.4)",
                  letterSpacing:"-.02em"}}>{p.n}</div>
              </div>

              <h3 style={{font:"400 28px/1.15 var(--font-display)",
                letterSpacing:".02em", margin:"0 0 18px", color:ink}}>{p.t}</h3>

              <div style={{font:"italic 400 15px/1.5 var(--font-editorial)",
                color:"var(--epa-champagne)", margin:"0 0 22px",
                padding:"0 8px"}}>{p.lede}</div>

              <div style={{display:"flex", justifyContent:"center", margin:"0 0 22px"}}>
                <Arabesque w={54}/>
              </div>

              <p style={{font:"300 14.5px/1.7 var(--font-editorial)",
                color:"var(--epa-text-secondary)", margin:"0 auto 26px", maxWidth:300}}>{p.body}</p>

              <div style={{
                display:"inline-block",
                padding:"9px 18px",
                borderTop:"1px solid rgba(170,135,87,.22)",
                borderBottom:"1px solid rgba(170,135,87,.22)",
                font:"400 9.5px/1 var(--font-editorial)",
                letterSpacing:".32em", textTransform:"uppercase",
                color:"var(--epa-gold)"}}>{p.meta}</div>
            </article>
            </Reveal>
          ))}
        </div>

        {/* day & night micro-band — reinforces benefit I */}
        <div style={{maxWidth:1400, margin:"56px auto 0", position:"relative",
          display:"grid", gridTemplateColumns:"1fr auto 1fr", alignItems:"center", gap:32,
          padding:"26px 40px",
          background:"linear-gradient(90deg, rgba(29,20,12,.6), rgba(19,12,7,.9), rgba(29,20,12,.6))",
          border:"1px solid rgba(170,135,87,.18)",
          boxShadow:"0 20px 50px -20px rgba(0,0,0,.8), 0 1px 0 rgba(212,175,125,.12) inset"}}>
          <div style={{textAlign:"right"}}>
            <div style={{font:"400 10px/1 var(--font-editorial)",
              color:"var(--epa-gold)", letterSpacing:".4em", textTransform:"uppercase", marginBottom:10}}>— Day concierge</div>
            <div style={{font:"italic 300 16px/1.4 var(--font-editorial)",
              color:"var(--epa-text-secondary)"}}>09:00 — 21:00 · Paris</div>
          </div>
          <div style={{width:1, height:44, background:"rgba(170,135,87,.35)"}}/>
          <div>
            <div style={{font:"400 10px/1 var(--font-editorial)",
              color:"var(--epa-gold)", letterSpacing:".4em", textTransform:"uppercase", marginBottom:10}}>Night concierge —</div>
            <div style={{font:"italic 300 16px/1.4 var(--font-editorial)",
              color:"var(--epa-text-secondary)"}}>21:00 — 09:00 · Paris</div>
          </div>
        </div>
      </section>

      {/* HOTEL BENEFITS — recap */}
      <section style={{padding:"140px 120px", background:C}}>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1.1fr", gap:100,
          alignItems:"start"}}>
          <div style={{position:"sticky", top:80}}>
            <Photo tone="alpine" h={540} src="assets/six-senses-ibiza.webp" alt="Six Senses Ibiza cliffside pool" caption="5,000+ houses, worldwide"/>
          </div>
          <div>
            <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
              letterSpacing:".5em", textTransform:"uppercase", marginBottom:24}}>— Chapitre 04 · Hotel privileges</div>
            <h2 style={{font:"400 56px/1.05 var(--font-display)",
              letterSpacing:".02em", margin:"0 0 28px"}}>
              5,000+ houses,<br/>
              <em style={{color:"var(--epa-champagne)"}}>one benefit card.</em>
            </h2>
            <p style={{font:"italic 300 17px/1.55 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:"0 0 36px", maxWidth:540}}>
              Through our partnerships with five thousand luxury houses,
              every stay booked by the atelier carries the following privileges —
              for members and pay-as-you-go alike.
            </p>
            <Arabesque w={100}/>
            <ul style={{listStyle:"none", padding:0, margin:"32px 0 0"}}>
              {[
                ["01","Daily breakfast for two"],
                ["02","Priority or guaranteed upgrade"],
                ["03","$100 credit per stay"],
                ["04","Early check-in · late check-out priority"],
                ["05","Further privileges per house"]
              ].map(([n,t]) => (
                <li key={n} style={{display:"grid",
                  gridTemplateColumns:"48px 1fr",
                  gap:24, alignItems:"baseline",
                  padding:"22px 0",
                  borderTop:"1px solid rgba(170,135,87,.15)"}}>
                  <div style={{font:"400 11px/1 var(--font-editorial)",
                    color:"var(--epa-gold)", letterSpacing:".3em"}}>{n}</div>
                  <div style={{font:"400 22px/1.2 var(--font-display)",
                    color:ink, letterSpacing:".02em"}}>{t}</div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* PARTNER HOUSES — logo grid */}
      <section style={{padding:"140px 80px", background:"var(--epa-charcoal)",
        borderTop:"1px solid rgba(170,135,87,.18)"}}>
        <div style={{maxWidth:1200, margin:"0 auto", width:"100%"}}>
          <div style={{textAlign:"center", marginBottom:60}}>
            <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
              letterSpacing:".5em", textTransform:"uppercase", marginBottom:20}}>— Chapitre 05 · Partner houses</div>
            <h2 style={{font:"400 52px/1.05 var(--font-display)",
              letterSpacing:".02em", margin:"0 0 18px"}}>
              The houses we <em style={{color:"var(--epa-champagne)"}}>work with.</em>
            </h2>
            <p style={{font:"italic 300 16px/1.5 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:"0 auto", maxWidth:560}}>
              Preferred partners across Europe and beyond — where our members
              are received as ours, not as guests.
            </p>
          </div>

          <div className="partner-logo-grid" style={{display:"grid",
            gridTemplateColumns:"repeat(4,1fr)",
            border:"1px solid rgba(170,135,87,.2)"}}>
            {[
              {f:"accor.png",       n:"Accor Hotels"},
              {f:"aman.png",        n:"Aman Group"},
              {f:"bvlgari.png",     n:"Bvlgari Hotels & Resorts"},
              {f:"four-seasons.png",n:"Four Seasons"},
              {f:"jumeirah.png",    n:"Jumeirah"},
              {f:"mandarin.png",    n:"Mandarin Oriental"},
              {f:"six-senses.png",  n:"Six Senses"},
              {f:"peninsula.png",   n:"The Peninsula"}
            ].map((l,i) => (
              <div key={l.f} className="partner-logo-cell" data-idx={i} style={{
                height:160,
                borderRight: (i%4!==3) ? "1px solid rgba(170,135,87,.2)" : "none",
                borderBottom: (i<4) ? "1px solid rgba(170,135,87,.2)" : "none",
                display:"flex", alignItems:"center", justifyContent:"center",
                padding:"20px 20px"}}>
                <img src={`assets/hotels/${l.f}`} alt={l.n}
                  style={{width:"100%", height:"76px",
                    objectFit:"contain",
                    filter:"brightness(0) invert(1) opacity(.82)"}}/>
              </div>
            ))}
          </div>

          <div style={{textAlign:"center", marginTop:40}}>
            <div style={{font:"italic 300 14px/1 var(--font-editorial)",
              color:"var(--epa-text-secondary)"}}>
              & forty-two others, on four continents.
            </div>
          </div>
        </div>
      </section>

      {/* HOW YOU JOIN */}
      <section style={{padding:"140px 120px",
        background:"var(--epa-charcoal)",
        borderTop:"1px solid rgba(170,135,87,.18)"}}>
        <div style={{textAlign:"center", marginBottom:80}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:20}}>— Chapitre 06 · The door</div>
          <h2 style={{font:"400 64px/1.05 var(--font-display)",
            letterSpacing:".02em", margin:"0 0 22px"}}>
            How one is <em style={{color:"var(--epa-champagne)"}}>invited.</em>
          </h2>
          <p style={{font:"italic 300 18px/1.5 var(--font-editorial)",
            color:"var(--epa-text-secondary)", margin:"0 auto", maxWidth:620}}>
            Three quiet steps. No public enrolment. No waitlist in the conventional sense —
            only a conversation, and a decision.
          </p>
        </div>

        <div style={{maxWidth:900, margin:"0 auto"}}>
          {[
            {n:"I",   t:"An introduction",
              body:"Write to us, or be introduced by a member. Tell us a little about yourself — where you live, what you travel for, what you expect of an atelier."},
            {n:"II",  t:"A conversation",
              body:"A founder or senior concierge calls you. Thirty minutes, no pitch — only to understand whether the atelier can serve you well, and whether you will enjoy being served by us."},
            {n:"III", t:"The invitation",
              body:"If it suits both parties, an invitation is extended. A dedicated concierge is assigned, preferences are taken, and the first arrangement begins."}
          ].map((s,i) => (
            <Reveal key={s.n} d={i*.12} y={18} threshold={0.15}>
            <div style={{display:"grid",
              gridTemplateColumns:"120px 1fr", gap:40,
              padding:"40px 0",
              borderTop: i>0 ? "1px solid rgba(170,135,87,.18)" : "none",
              transition:"padding-left .4s, background .3s", cursor:"default"}}
              onMouseEnter={e=>{e.currentTarget.style.paddingLeft="16px";e.currentTarget.style.background="rgba(170,135,87,.04)"}}
              onMouseLeave={e=>{e.currentTarget.style.paddingLeft="0";e.currentTarget.style.background="transparent"}}>
              <div style={{font:"300 72px/1 var(--font-editorial)",
                color:"var(--epa-gold)", letterSpacing:"-.02em"}}>{s.n}</div>
              <div>
                <h3 style={{font:"400 32px/1.1 var(--font-display)",
                  letterSpacing:".02em", margin:"0 0 14px"}}>{s.t}</h3>
                <p style={{font:"italic 300 17px/1.6 var(--font-editorial)",
                  color:"var(--epa-text-secondary)", margin:0, maxWidth:620}}>{s.body}</p>
              </div>
            </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* INVITATION FORM */}
      <section id="invitation" style={{padding:"140px 120px", background:"var(--epa-charcoal)",
        textAlign:"center"}}>
        <div style={{maxWidth:720, margin:"0 auto"}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:20}}>— Chapitre 07 · Invitation</div>
          <h2 style={{font:"400 68px/1.05 var(--font-display)",
            letterSpacing:".02em", margin:"0 0 24px"}}>
            Request an invitation.
          </h2>
          <p style={{font:"italic 300 18px/1.5 var(--font-editorial)",
            color:"var(--epa-text-secondary)", margin:"0 0 48px"}}>
            A founder will reply within twenty-four hours.
          </p>

          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:20, textAlign:"left"}}>
            {[["Full name","—"],["Email","—"],
              ["City of residence","—"],["Introduced by (optional)","—"]].map(([l,v]) => (
              <div key={l}>
                <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
                  letterSpacing:".24em", textTransform:"uppercase", marginBottom:10}}>{l}</div>
                <div style={{borderBottom:"1px solid rgba(170,135,87,.3)",
                  padding:"10px 0", minHeight:24,
                  font:"400 15px/1 var(--font-ui)", color:"var(--epa-text-secondary)"}}>{v}</div>
              </div>
            ))}
            <div style={{gridColumn:"1/-1"}}>
              <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
                letterSpacing:".24em", textTransform:"uppercase", marginBottom:10}}>A word about yourself</div>
              <div style={{borderBottom:"1px solid rgba(170,135,87,.3)",
                padding:"10px 0", minHeight:48,
                font:"italic 400 15px/1.5 var(--font-editorial)",
                color:"var(--epa-text-secondary)"}}>
                What do you travel for · what do you expect of an atelier · any houses, cities, or arrangements worth mentioning.
              </div>
            </div>
          </div>
          <div style={{marginTop:48}}>
            <HairlineBtn filled size="lg" href="request-access.html">Send request</HairlineBtn>
          </div>
          <div style={{marginTop:40,
            font:"italic 300 13px/1.5 var(--font-editorial)",
            color:"var(--epa-text-secondary)"}}>
            All correspondence is held in confidence — within the atelier, and no further.
          </div>
        </div>
      </section>

      <SiteFooter/>
    </div>
  );
};

Object.assign(window, {MembershipPage});
