:root{
    --ink:#0B0908;
    --ink-soft:#120F0C;
    --panel:#17130F;
    --panel-2:#1D1712;
    --hair:rgba(200,161,92,0.16);
    --hair-strong:rgba(200,161,92,0.32);
    --gold:#C8A15C;
    --gold-bright:#EAD08F;
    --gold-dim:#8A7647;
    --wine:#5C1220;
    --wine-bright:#8A2233;
    --bone:#EDE6D8;
    --bone-dim:#9C9382;
    --bone-faint:#6E6656;
    --maxw:1180px;
    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --body: 'EB Garamond', Georgia, serif;
    --script: 'Parisienne', cursive;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }

  body{
    margin:0;
    background:var(--ink);
    color:var(--bone);
    font-family:var(--body);
    font-size:18px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background:var(--gold); color:var(--ink); }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:1px solid var(--gold-bright);
    outline-offset:4px;
  }

  /* ---------- texture / background elements ---------- */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:500; opacity:0.045; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- nav ---------- */
  header.site{
    position:fixed; top:0; left:0; right:0; z-index:200;
    padding:26px 0;
    transition:padding .5s ease, background-color .5s ease, border-color .5s ease;
    border-bottom:1px solid transparent;
  }
  header.site.scrolled{
    padding:16px 0;
    background-color:rgba(11,9,8,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--hair);
  }
  header.site .wrap{ display:flex; align-items:center; justify-content:space-between; }

  .brandmark{ display:flex; align-items:center; gap:12px; }
  .brandmark img{ height:40px; width:auto; display:block; }

  nav.primary{ display:flex; align-items:center; gap:40px; }
  nav.primary ul{ list-style:none; display:flex; gap:36px; margin:0; padding:0; }
  nav.primary a.navlink{
    font-family:var(--body); font-size:15px; letter-spacing:0.04em; color:var(--bone-dim);
    position:relative; padding-bottom:4px; transition:color .3s ease;
  }
  nav.primary a.navlink::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
    transition:width .35s ease;
  }
  nav.primary a.navlink:hover{ color:var(--bone); }
  nav.primary a.navlink:hover::after{ width:100%; }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--body); font-size:14.5px; letter-spacing:0.08em; text-transform:uppercase;
    padding:13px 26px; border:1px solid var(--gold-dim); color:var(--gold-bright);
    background:transparent; cursor:pointer; white-space:nowrap;
    transition:border-color .35s ease, background-color .35s ease, color .35s ease;
  }
  .btn:hover{ border-color:var(--gold-bright); background:rgba(200,161,92,0.08); }
  .btn.solid{
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
    color:#1A1207; border-color:transparent; font-weight:600;
  }
  .btn.solid:hover{ filter:brightness(1.08); }
  .btn svg{ width:14px; height:14px; transition:transform .35s ease; }
  .btn:hover svg{ transform:translateX(3px); }

  .menu-toggle{
    display:none; width:26px; height:20px; position:relative; background:none; border:0; cursor:pointer; padding:0;
  }
  .menu-toggle span{
    position:absolute; left:0; right:0; height:1px; background:var(--gold-bright);
    transition:transform .3s ease, opacity .3s ease, top .3s ease;
  }
  .menu-toggle span:nth-child(1){ top:0; }
  .menu-toggle span:nth-child(2){ top:9px; }
  .menu-toggle span:nth-child(3){ top:18px; }
  .menu-toggle.open span:nth-child(1){ top:9px; transform:rotate(45deg); }
  .menu-toggle.open span:nth-child(2){ opacity:0; }
  .menu-toggle.open span:nth-child(3){ top:9px; transform:rotate(-45deg); }

  .mobile-drawer{
    position:fixed; inset:0; z-index:190; background:var(--ink);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .4s ease, transform .4s ease, visibility .4s;
  }
  .mobile-drawer.open{ opacity:1; visibility:visible; transform:translateY(0); }
  .mobile-drawer a{ font-family:var(--serif); font-size:26px; color:var(--bone); letter-spacing:0.03em; }
  .mobile-drawer a.btn{ font-family:var(--body); font-size:15px; }

  /* ---------- hero ---------- */
  .hero{
    position:relative; min-height:clamp(600px, 84vh, 780px); display:flex; align-items:flex-end;
    padding:140px 0 76px;
    overflow:hidden;
    isolation:isolate;
  }
  .hero-media{
    position:absolute; inset:-6% -3%; z-index:0;
    background-size:cover;
    background-position:32% 38%;
    filter:saturate(1.28) brightness(1.14) contrast(1.05);
    transform:scale(1.03);
    animation:hero-breathe 22s ease-in-out infinite alternate;
  }
  @keyframes hero-breathe{ 0%{ transform:scale(1.03); } 100%{ transform:scale(1.08); } }
  .hero-scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(105deg, rgba(7,5,4,0.92) 0%, rgba(7,5,4,0.72) 34%, rgba(7,5,4,0.28) 58%, transparent 76%),
      radial-gradient(ellipse 90% 60% at 18% 100%, rgba(92,18,32,0.32), transparent 62%),
      linear-gradient(180deg, rgba(11,9,8,0.56) 0%, rgba(11,9,8,0.12) 24%, rgba(11,9,8,0.26) 55%, rgba(11,9,8,1) 100%);
  }
  .hero .wrap{ position:relative; z-index:2; width:100%; }
  .hero-inner{ max-width:760px; }

  .kicker{
    font-family:var(--body); font-style:italic; font-size:15px; letter-spacing:0.06em;
    color:var(--bone-dim); margin:0 0 22px;
    opacity:0; transform:translateY(10px);
  }
  .hero h1{
    font-family:var(--serif); font-weight:700; letter-spacing:0.01em;
    font-size:clamp(46px, 8vw, 88px); line-height:1.02; margin:0 0 26px; color:var(--bone);
    opacity:0; transform:translateY(16px);
  }
  .hero h1 em{
    font-style:normal; color:transparent;
    background:linear-gradient(120deg, var(--gold-bright), var(--gold) 60%, var(--gold-dim));
    -webkit-background-clip:text; background-clip:text;
  }
  .hero .lede{
    font-family:var(--body); font-size:21px; color:var(--bone-dim); max-width:520px; margin:0 0 40px;
    opacity:0; transform:translateY(14px);
  }
  .hero .cta-row{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; opacity:0; transform:translateY(14px); }
  .hero .script-tag{
    font-family:var(--script); font-size:30px; color:var(--gold-bright); line-height:1;
  }

  .hero.loaded .kicker,
  .hero.loaded h1,
  .hero.loaded .lede,
  .hero.loaded .cta-row{
    opacity:1; transform:translateY(0);
    transition:opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);
  }
  .hero.loaded .kicker{ transition-delay:.05s; }
  .hero.loaded h1{ transition-delay:.18s; }
  .hero.loaded .lede{ transition-delay:.38s; }
  .hero.loaded .cta-row{ transition-delay:.54s; }

  .scroll-cue{
    position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    font-family:var(--body); font-size:11px; letter-spacing:0.2em; color:var(--bone-faint); text-transform:uppercase;
  }
  .scroll-cue .line{ width:1px; height:34px; background:linear-gradient(180deg, var(--gold), transparent); animation:pulse-line 2.4s ease-in-out infinite; }
  @keyframes pulse-line{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

  /* ---------- section shared ---------- */
  section{ position:relative; }
  .section-pad{ padding:130px 0; }
  @media (max-width:760px){ .section-pad{ padding:88px 0; } }

  .eyebrow{
    font-family:var(--body); font-size:13px; letter-spacing:0.24em; text-transform:uppercase;
    color:var(--gold); margin:0 0 18px; display:flex; align-items:center; gap:14px;
  }
  .eyebrow::before{ content:""; width:30px; height:1px; background:var(--gold-dim); }

  h2.display{
    font-family:var(--serif); font-weight:700; font-size:clamp(34px, 4.4vw, 54px); line-height:1.08;
    margin:0 0 28px; color:var(--bone); max-width:16ch;
  }

  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- story ---------- */
  .story{ background:var(--ink); }
  .story-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:96px; align-items:start; }
  .story-copy p{ font-size:19px; color:var(--bone-dim); max-width:52ch; margin:0 0 22px; }
  .story-copy p:first-of-type{ color:var(--bone); font-size:21px; }

  .keyhole-frame{
    position:relative; border:1px solid var(--hair); padding:56px 40px;
    background:linear-gradient(160deg, var(--panel), var(--ink-soft));
  }
  .keyhole-frame::before, .keyhole-frame::after{
    content:""; position:absolute; width:16px; height:16px; border:1px solid var(--gold-dim);
  }
  .keyhole-frame::before{ top:14px; left:14px; border-right:none; border-bottom:none; }
  .keyhole-frame::after{ bottom:14px; right:14px; border-left:none; border-top:none; }
  .keyhole-frame svg.key-icon{ width:54px; height:54px; margin:0 auto 26px; display:block; color:var(--gold); }
  .keyhole-frame img.key-photo{ width:100%; max-width:280px; height:auto; margin:0 auto 30px; display:block; filter:drop-shadow(0 12px 20px rgba(0,0,0,0.5)); }
  .keyhole-frame h3{
    font-family:var(--serif); font-size:26px; text-align:center; margin:0 0 22px; letter-spacing:0.03em; color:var(--bone);
  }
  .keyhole-frame p{ font-size:18px; text-align:center; color:var(--bone-dim); margin:0 0 18px; max-width:38ch; margin-left:auto; margin-right:auto; line-height:1.7; }
  .keyhole-frame p:last-child{ margin-bottom:0; }
  .keyhole-frame p.emph{ color:var(--gold-bright); font-style:italic; }

  /* category ribbon */
  .ribbon{
    margin-top:110px; padding-top:56px; border-top:1px solid var(--hair);
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
    gap:22px; text-align:center;
  }
  .ribbon span.tag{
    font-family:var(--serif); font-size:16px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bone-dim);
  }
  .ribbon span.sep{ color:var(--gold-dim); font-size:10px; }

  .doorline{
    text-align:center; margin-top:90px;
  }
  .doorline p{
    font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.6vw,40px);
    letter-spacing:0.02em; color:var(--bone); margin:0; line-height:1.3;
  }
  .doorline p span{ color:var(--gold-bright); }

  /* ---------- photo bands ---------- */
  .photo-band{
    height:440px;
    background-size:cover; background-position:center;
    position:relative; display:flex; align-items:center; justify-content:center;
  }
  .photo-band::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(11,9,8,0.2), rgba(11,9,8,0.78));
  }
  .photo-band .script-line{
    position:relative; z-index:1;
    font-family:var(--script); font-size:clamp(32px,5vw,52px); color:var(--gold-bright);
    text-align:center; padding:0 24px;
  }
  @media (max-width:760px){ .photo-band{ height:300px; } }

  /* ---------- diptych ---------- */
  .diptych{
    display:grid; grid-template-columns:1fr 1fr; gap:2px;
    margin-top:64px;
  }
  .diptych figure{ margin:0; position:relative; overflow:hidden; height:340px; }
  .diptych img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.12) brightness(0.96); transition:transform 1.2s cubic-bezier(.16,.8,.24,1); }
  .diptych figure:hover img{ transform:scale(1.05); }
  .diptych figcaption{
    position:absolute; left:20px; bottom:16px; z-index:1;
    font-family:var(--body); font-style:italic; font-size:14px; color:var(--bone);
    text-shadow:0 2px 10px rgba(0,0,0,0.7);
  }
  @media (max-width:700px){
    .diptych{ grid-template-columns:1fr; }
    .diptych figure{ height:260px; }
  }

  /* ---------- membership ---------- */
  .membership{ background:var(--panel); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
  .membership-head{ max-width:640px; margin-bottom:36px; }
  .membership-head .lede{ font-size:19px; color:var(--bone-dim); margin:0 0 4px; }
  .membership-intro{
    font-size:17px; color:var(--bone-dim); max-width:70ch; margin:32px 0 90px;
    padding-top:32px; border-top:1px solid var(--hair);
  }

  .keys-list{ display:flex; flex-direction:column; }
  .key-row{
    display:grid; grid-template-columns:100px 1fr 1.3fr; gap:44px; align-items:start;
    padding:44px 0; border-top:1px solid var(--hair);
  }
  .key-row:last-child{ border-bottom:1px solid var(--hair); }
  .key-row .numeral{
    font-family:var(--serif); font-size:44px; color:var(--gold-dim); font-weight:500; line-height:1;
  }
  .key-row .name{
    font-family:var(--serif); font-size:26px; color:var(--bone); margin:0 0 8px; letter-spacing:0.01em;
  }
  .key-row .subhead{
    font-family:var(--body); font-style:italic; font-size:15.5px; color:var(--gold); margin:0;
  }
  .key-row .desc{ font-size:17px; color:var(--bone-dim); margin:0; max-width:52ch; padding-top:6px; }

  @media (max-width:860px){
    .key-row{ grid-template-columns:56px 1fr; }
    .key-row .desc{ grid-column:2 / 3; }
  }

  /* ---------- closing CTA ---------- */
  .closing{
    background:
      radial-gradient(ellipse 80% 70% at 50% 0%, rgba(92,18,32,0.28), transparent 60%),
      var(--ink);
    text-align:center;
  }
  .closing .wrap{ max-width:800px; }
  .closing h2.display{ margin-left:auto; margin-right:auto; max-width:18ch; }
  .closing p.body{ font-size:19px; color:var(--bone-dim); max-width:56ch; margin:0 auto 48px; }
  .closing .label{
    font-family:var(--body); font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-dim);
    margin:0 0 30px;
  }
  .closing .cta-wrap{ display:flex; justify-content:center; }

  /* ---------- upcoming event ---------- */
  .event{
    background:var(--panel); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  }
  .event-head{ text-align:center; max-width:600px; margin:0 auto 56px; }
  .event-head .lede{ font-size:18px; color:var(--bone-dim); margin:0; }
  .event-frame{
    max-width:900px; margin:0 auto; position:relative;
    padding:14px; border:1px solid var(--hair-strong);
    background:linear-gradient(160deg, var(--panel-2), var(--ink-soft));
  }
  .event-frame img{ width:100%; display:block; }
  .event-caption{
    text-align:center; max-width:680px; margin:34px auto 0;
    font-size:15px; color:var(--bone-dim); line-height:1.8;
  }
  .event-caption strong{ color:var(--gold-bright); font-weight:600; }
  .event-cta{ display:flex; justify-content:center; margin-top:38px; }

  /* ---------- brand plaque banner ---------- */
  .plaque-band{
    padding:90px 0;
    background:var(--ink);
    display:flex; justify-content:center;
  }
  .plaque-band .frame{
    max-width:880px; width:100%; margin:0 32px;
    border:1px solid var(--hair-strong); padding:10px;
    background:linear-gradient(160deg, var(--panel), var(--ink-soft));
    box-shadow:0 30px 70px -30px rgba(0,0,0,0.7);
  }
  .plaque-band img{ width:100%; display:block; }
  @media (max-width:760px){ .plaque-band{ padding:60px 0; } }

  /* ---------- footer ---------- */
  footer{ border-top:1px solid var(--hair); padding:64px 0 40px; }
  .footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; }
  footer .fbrand{ display:flex; align-items:center; gap:12px; opacity:0.82; }
  footer .fbrand img{ height:30px; width:auto; display:block; }
  footer nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; flex-wrap:wrap; }
  footer nav a{ font-size:14.5px; color:var(--bone-dim); transition:color .3s ease; }
  footer nav a:hover{ color:var(--gold-bright); }
  footer .contact{ font-size:14.5px; color:var(--bone-faint); }
  footer .contact a{ color:var(--bone-dim); }
  footer .contact a:hover{ color:var(--gold-bright); }
  .footer-bottom{
    margin-top:52px; padding-top:24px; border-top:1px solid var(--hair);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
    font-size:13px; color:var(--bone-faint);
  }
  .socials{ display:flex; gap:18px; }
  .socials a{ color:var(--bone-faint); transition:color .3s ease; }
  .socials a:hover{ color:var(--gold-bright); }
  .socials svg{ width:16px; height:16px; }

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    nav.primary ul, nav.primary .btn{ display:none; }
    .menu-toggle{ display:block; }
    .story-grid{ grid-template-columns:1fr; gap:56px; }
    .keyhole-frame{ max-width:460px; }
  }
  @media (max-width:640px){
    body{ font-size:16.5px; }
    .wrap{ padding:0 22px; }
    .hero{ padding:118px 0 64px; min-height:clamp(560px, 88vh, 700px); }
    .hero .cta-row{ gap:18px; }
    .scroll-cue{ bottom:18px; }
    .scroll-cue .line{ height:22px; }
    .key-row{ padding:32px 0; gap:20px; }
    .ribbon{ gap:14px; margin-top:70px; padding-top:40px; }
    .ribbon span.tag{ font-size:13.5px; letter-spacing:0.1em; }
    .doorline{ margin-top:60px; }
    footer .footer-grid{ flex-direction:column; }
  }

/* ============================================================
   MULTI-PAGE PLATFORM ADDITIONS
   ============================================================ */

/* ---------- page hero (sub-pages) ---------- */
.page-hero{
  position:relative; padding:170px 0 90px; overflow:hidden; isolation:isolate;
  border-bottom:1px solid var(--hair);
}
.page-hero .hero-media{ position:absolute; inset:-6% -3%; z-index:0; background-size:cover; background-position:center 35%; filter:saturate(1.2) brightness(0.85) contrast(1.04); }
.page-hero .hero-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(11,9,8,0.55) 0%, rgba(11,9,8,0.55) 40%, rgba(11,9,8,1) 100%); }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .crumb{
  font-family:var(--body); font-size:13px; letter-spacing:0.1em; color:var(--gold); text-transform:uppercase; margin:0 0 18px;
}
.page-hero .crumb a{ color:var(--bone-dim); transition:color .3s ease; }
.page-hero .crumb a:hover{ color:var(--gold-bright); }
.page-hero h1{
  font-family:var(--serif); font-weight:700; font-size:clamp(38px,6vw,64px); line-height:1.05; margin:0 0 20px; color:var(--bone); max-width:16ch;
}
.page-hero p.sub{ font-family:var(--body); font-style:italic; font-size:19px; color:var(--bone-dim); max-width:56ch; margin:0; }

/* ---------- badges / notices ---------- */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase;
  padding:7px 14px; border:1px solid var(--gold-dim); color:var(--gold-bright);
  border-radius:2px;
}
.badge.dim{ color:var(--bone-dim); border-color:var(--hair-strong); }

.notice{
  border:1px dashed var(--hair-strong); background:rgba(200,161,92,0.04);
  padding:18px 22px; margin:28px 0; font-size:14.5px; color:var(--bone-dim); line-height:1.7;
}
.notice strong{ color:var(--gold); font-family:var(--body); letter-spacing:0.05em; text-transform:uppercase; font-size:12.5px; display:block; margin-bottom:6px; }

/* ---------- forms ---------- */
.form-panel{
  background:var(--panel); border:1px solid var(--hair); padding:44px;
}
@media (max-width:640px){ .form-panel{ padding:28px 22px; } }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 24px; }
.form-grid .full{ grid-column:1 / -1; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

.field label{
  display:block; font-family:var(--body); font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold-dim); margin-bottom:9px;
}
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="number"], .field select, .field textarea{
  width:100%; background:var(--ink-soft); border:1px solid var(--hair-strong); color:var(--bone);
  font-family:var(--body); font-size:16px; padding:13px 14px; border-radius:0; outline:none;
  transition:border-color .3s ease, background-color .3s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); background:var(--panel-2); }
.field textarea{ resize:vertical; min-height:110px; }
.field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A15C'%3E%3Cpath d='M6 9l6 6 6-6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:38px; }
.field .hint{ font-size:13px; color:var(--bone-faint); margin-top:7px; }

.file-drop{
  border:1px dashed var(--hair-strong); padding:26px; text-align:center; cursor:pointer;
  color:var(--bone-dim); font-size:14.5px; transition:border-color .3s ease, background-color .3s ease;
}
.file-drop:hover{ border-color:var(--gold); background:rgba(200,161,92,0.04); }
.file-drop input{ display:none; }
.file-drop .fname{ display:block; margin-top:8px; color:var(--gold-bright); font-style:italic; }

.option-select{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:6px 0 6px; }
@media (max-width:760px){ .option-select{ grid-template-columns:1fr; } }
.option-card{
  position:relative; border:1px solid var(--hair-strong); padding:22px 20px; cursor:pointer;
  background:var(--ink-soft); transition:border-color .3s ease, background-color .3s ease;
}
.option-card:hover{ border-color:var(--gold-dim); }
.option-card input{ position:absolute; top:18px; right:18px; accent-color:#C8A15C; width:16px; height:16px; }
.option-card .roman{ font-family:var(--serif); color:var(--gold-dim); font-size:22px; margin-bottom:8px; }
.option-card .name{ font-family:var(--serif); font-size:19px; color:var(--bone); margin:0 0 6px; }
.option-card .price{ font-family:var(--body); font-style:italic; color:var(--gold); font-size:14.5px; }
.option-card:has(input:checked){ border-color:var(--gold); background:rgba(200,161,92,0.06); }

.total-strip{
  display:flex; align-items:center; justify-content:space-between; margin-top:22px;
  padding:16px 20px; border:1px solid var(--hair-strong); background:rgba(200,161,92,0.05);
}
.total-strip span{ font-family:var(--body); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--bone-dim); }
.total-strip strong{ font-family:var(--serif); font-size:26px; color:var(--gold-bright); font-weight:600; }
.field select:disabled{ opacity:0.45; cursor:not-allowed; }

.form-actions{ display:flex; align-items:center; gap:22px; margin-top:36px; flex-wrap:wrap; }
.form-note{ font-size:13.5px; color:var(--bone-faint); }

.form-success{
  display:none; text-align:center; padding:50px 20px; border:1px solid var(--hair-strong); background:var(--panel);
}
.form-success.show{ display:block; }
.form-success .icon{ width:44px; height:44px; margin:0 auto 20px; color:var(--gold); }
.form-success h3{ font-family:var(--serif); font-size:26px; color:var(--bone); margin:0 0 12px; }
.form-success p{ color:var(--bone-dim); font-size:16px; max-width:44ch; margin:0 auto; }

/* ---------- event cards / listing ---------- */
.event-card-grid{ display:grid; grid-template-columns:1fr; gap:2px; background:var(--hair); }
.event-card{
  display:grid; grid-template-columns:340px 1fr; gap:0; background:var(--ink);
}
@media (max-width:760px){ .event-card{ grid-template-columns:1fr; } }
.event-card .thumb{ position:relative; overflow:hidden; min-height:230px; }
.event-card .thumb img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; filter:saturate(1.1); }
.event-card .body{ padding:36px 40px; display:flex; flex-direction:column; justify-content:center; }
@media (max-width:640px){ .event-card .body{ padding:28px 24px; } }
.event-card .date{ font-family:var(--body); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin:0 0 12px; }
.event-card h3{ font-family:var(--serif); font-size:28px; color:var(--bone); margin:0 0 12px; }
.event-card p.desc{ color:var(--bone-dim); font-size:16px; margin:0 0 22px; max-width:52ch; }
.event-card .meta{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
.event-card .meta span{ font-size:13.5px; color:var(--bone-faint); }
.event-card .meta strong{ color:var(--gold-bright); font-weight:500; }

/* ---------- digital membership card ---------- */
.demo-flag{ text-align:center; margin-bottom:26px; }
.card-stage{ display:flex; justify-content:center; padding:20px 0 10px; }
.membership-card{
  width:100%; max-width:420px; min-height:230px; position:relative; border-radius:16px; padding:26px 26px;
  background:
    radial-gradient(ellipse 140% 100% at 0% 0%, rgba(200,161,92,0.16), transparent 55%),
    linear-gradient(155deg, #1D1712 0%, #0B0908 70%);
  border:1px solid var(--hair-strong); box-shadow:0 30px 60px -25px rgba(0,0,0,0.8);
  display:flex; flex-direction:column; justify-content:space-between; gap:16px; color:var(--bone);
}
.membership-card .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.membership-card .brand{ font-family:var(--serif); font-size:14px; letter-spacing:0.06em; color:var(--gold-bright); }
.membership-card .brand small{ display:block; font-family:var(--body); font-style:italic; font-size:10.5px; color:var(--bone-dim); text-transform:none; letter-spacing:0.02em; margin-top:2px; }
.membership-card .tier{ font-family:var(--body); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-dim); padding:5px 10px; }
.membership-card .holder{ font-family:var(--serif); font-size:22px; color:var(--bone); }
.membership-card .bottom{ display:flex; justify-content:space-between; align-items:flex-end; }
.membership-card .idrow{ font-family:'EB Garamond',serif; font-size:12px; letter-spacing:0.08em; color:var(--bone-faint); }
.membership-card .idrow strong{ color:var(--bone-dim); display:block; font-size:10px; text-transform:uppercase; letter-spacing:0.12em; margin-bottom:3px; }
.membership-card .mid{ display:flex; align-items:center; gap:14px; }
.membership-card .avatar{
  width:46px; height:46px; border-radius:50%; flex:none; overflow:hidden;
  background:linear-gradient(160deg, var(--panel-2), var(--ink-soft)); border:1px solid var(--hair-strong);
  display:flex; align-items:center; justify-content:center; color:var(--gold-dim);
  background-size:cover; background-position:center;
}
.membership-card .avatar svg{ width:22px; height:22px; }
.qr-mock{ width:54px; height:54px; flex:none; }

/* ---------- mock spam-protection checkbox ---------- */
.captcha-box{
  display:flex; align-items:center; gap:14px; border:1px solid var(--hair-strong); background:var(--ink-soft);
  padding:14px 16px; max-width:320px; cursor:pointer; user-select:none;
}
.captcha-box input{ position:absolute; opacity:0; width:0; height:0; }
.captcha-check{
  width:22px; height:22px; flex:none; border:1px solid var(--bone-faint); background:var(--panel);
  position:relative;
}
.captcha-box input:checked + .captcha-check{ background:var(--gold); border-color:var(--gold); }
.captcha-box input:checked + .captcha-check::after{
  content:""; position:absolute; left:6px; top:2px; width:6px; height:11px;
  border:solid #1A1207; border-width:0 2px 2px 0; transform:rotate(40deg);
}
.captcha-box span:nth-of-type(2){ font-size:14.5px; color:var(--bone); flex:1; }
.captcha-badge{
  font-size:9px; line-height:1.3; color:var(--bone-faint); text-align:center; font-family:var(--body);
}
.captcha-badge small{ font-size:8px; }

/* ---------- digital event coupon ---------- */
.coupon-card{
  max-width:460px; margin:0 auto; position:relative; background:var(--panel); border:1px solid var(--hair-strong);
}
.coupon-card .head{ padding:26px 28px; border-bottom:1px dashed var(--hair-strong); text-align:center; }
.coupon-card .head .brand{ font-family:var(--serif); font-size:14px; color:var(--gold-bright); letter-spacing:0.05em; margin-bottom:6px; }
.coupon-card .head h3{ font-family:var(--serif); font-size:23px; color:var(--bone); margin:6px 0 0; }
.coupon-card .rows{ padding:22px 28px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.coupon-card .rows div span{ display:block; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:4px; }
.coupon-card .rows div strong{ font-family:var(--body); font-size:16px; color:var(--bone); font-weight:500; }
.coupon-card .qr-wrap{ display:flex; justify-content:center; padding:8px 28px 28px; }

/* ---------- gallery ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
}
@media (max-width:860px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-grid figure{ margin:0; position:relative; overflow:hidden; aspect-ratio:4/5; }
.gallery-grid.wide figure:nth-child(3n+1){ aspect-ratio:4/5; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.08) brightness(0.96); transition:transform 1s cubic-bezier(.16,.8,.24,1), filter .4s ease; }
.gallery-grid figure:hover img{ transform:scale(1.06); filter:saturate(1.2) brightness(1.02); }
.gallery-grid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
  background:linear-gradient(0deg, rgba(0,0,0,0.72), transparent);
  font-family:var(--body); font-style:italic; font-size:13.5px; color:var(--bone);
  opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease;
}
.gallery-grid figure:hover figcaption{ opacity:1; transform:translateY(0); }

/* ---------- simple content sections used on sub-pages ---------- */
.content-narrow{ max-width:760px; }
.content-narrow p{ font-size:18px; color:var(--bone-dim); margin:0 0 20px; }
.section-divider{ border:none; border-top:1px solid var(--hair); margin:0; }

/* active nav state */
nav.primary a.navlink.active{ color:var(--gold-bright); }
nav.primary a.navlink.active::after{ width:100%; }

/* ---------- Google reCAPTCHA v2 checkbox ---------- */
.recaptcha-slot{ margin-top:32px; min-height:78px; }
.recaptcha-slot.is-missing{ min-height:0; }
.recaptcha-slot .recaptcha-note{ font-size:14px; color:var(--bone-dim); margin:0; }
@media (max-width:380px){
  .recaptcha-slot > div{ transform:scale(0.88); transform-origin:0 0; }
}

/* ============================================================
   MEMBERSHIP APPLICATION (Phase 1) — additions only
   ============================================================ */
/* pending card preview: the site's key replaces the placeholder QR */
.membership-card .card-key{ width:84px; height:auto; flex:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.45)); }
.membership-card .holder{ overflow-wrap:anywhere; }
.membership-card #cardStatus{ color:var(--gold); font-style:italic; letter-spacing:0.04em; }

/* keyboard focus for the photo drop zone */
.file-drop:focus-visible{ outline:1px solid var(--gold-bright); outline-offset:3px; border-color:var(--gold); }
.file-drop .file-hint{ display:block; margin-top:6px; font-size:13px; color:var(--bone-faint); }

/* inline, accessible error message for the application */
.form-status{
  margin:22px 0 0; padding:13px 16px; border:1px solid var(--wine-bright); background:rgba(92,18,32,0.2);
  color:#E4B7BF; font-size:15.5px; line-height:1.55;
}
.form-status[hidden]{ display:none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:var(--wine-bright); }
.option-select:has(input[aria-invalid="true"]) .option-card{ border-color:rgba(138,34,51,0.7); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{ outline:1px solid var(--gold-bright); outline-offset:2px; }

/* loading state */
.btn.is-loading{ cursor:progress; filter:saturate(0.85); }
.btn[disabled]{ cursor:progress; }
.btn-spinner{
  width:13px; height:13px; border-radius:50%; flex:none;
  border:1.5px solid rgba(26,18,7,0.35); border-top-color:#1A1207; animation:sk-spin .8s linear infinite;
}
@keyframes sk-spin{ to{ transform:rotate(360deg); } }

/* success state */
.form-success.application-received{ padding:54px 26px 50px; outline:none; }
.form-success .success-key{ width:120px; height:auto; margin:0 auto 22px; filter:drop-shadow(0 10px 18px rgba(0,0,0,0.5)); }
.form-success .success-eyebrow{
  font-family:var(--body); font-size:13px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); margin:0 auto 12px; max-width:none;
}
.form-success.application-received h3{ font-size:clamp(24px, 3.4vw, 30px); max-width:22ch; margin:0 auto 14px; line-height:1.2; }
.success-ref{ display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin:30px auto 6px; max-width:520px; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.success-ref[hidden]{ display:none; }
.success-ref div{ flex:1 1 200px; padding:16px 12px; }
.success-ref div + div{ border-left:1px solid var(--hair); }
.success-ref dt{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-dim); }
.success-ref dd{ margin:4px 0 0; font-family:var(--serif); font-size:21px; color:var(--bone); letter-spacing:0.03em; overflow-wrap:anywhere; }
.form-success .success-note{ margin-top:18px; font-size:15px; color:var(--bone-faint); overflow-wrap:anywhere; }
.form-success .success-note[hidden]{ display:none; }
@media (max-width:520px){ .success-ref div + div{ border-left:0; border-top:1px solid var(--hair); } }

/* ============================================================
   SMALL-SCREEN FIXES (pre-existing overflow at 320–430px)
   ============================================================ */
/* grid tracks may shrink below their content's min width (fixed-width widgets) */
.story-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); }
.story-grid > *{ min-width:0; }
@media (max-width:980px){ .story-grid{ grid-template-columns:minmax(0,1fr); gap:56px; } }
@media (max-width:760px){
  .event-card-grid{ grid-template-columns:minmax(0,1fr); }
  .event-card{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:520px){
  .event-cta{ flex-wrap:wrap; gap:14px; }
  .event-cta .btn{ margin-left:0 !important; }
  .event-cta .btn, .event-card .btn{ white-space:normal; text-align:center; justify-content:center; }
}
/* reCAPTCHA's checkbox is a fixed 304px; scale it to the form width on small phones */
@media (max-width:400px){
  .recaptcha-slot > div{ transform:scale(0.88); transform-origin:0 0; }
}
@media (max-width:360px){
  .recaptcha-slot > div{ transform:scale(0.76); transform-origin:0 0; }
  .recaptcha-slot{ min-height:62px; }
}

/* ============================================================
   EVENT: BOOM BOOM ROOM — SILK PAJAMA PARTY (scoped additions)
   The flyer is landscape and carries event details, so it is
   always shown whole: natural aspect ratio, never cropped.
   ============================================================ */
.event-frame.is-flyer{ background:#000; }
.event-frame.is-flyer img{ width:100%; max-width:100%; height:auto; }
.event-card.is-flyer{ grid-template-columns:minmax(0,1fr); }
.event-card.is-flyer .thumb{ min-height:0; background:#000; }
.event-card.is-flyer .thumb img{ position:static; inset:auto; width:100%; height:auto; object-fit:contain; display:block; }
.event-subtitle{ font-family:var(--script); font-weight:400; color:var(--gold-bright); line-height:1.1; font-size:32px; margin:-4px 0 16px; }
.page-hero .hero-subtitle{ font-size:clamp(34px,5vw,54px); margin:-8px 0 20px; }
.event-tagline{ font-family:var(--body); font-size:14px; letter-spacing:0.18em; text-transform:uppercase; color:var(--bone-dim); margin:0; max-width:60ch; }
@media (max-width:520px){ .event-tagline{ font-size:12.5px; letter-spacing:0.14em; } }
.pay-strip{ margin-top:14px; padding:18px 20px; border:1px solid var(--hair-strong); background:rgba(200,161,92,0.03); }
.pay-strip .pay-title{ font-family:var(--body); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--bone-dim); margin:0 0 12px; }
.pay-strip .pay-methods{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 24px; }
.pay-strip .pay-methods span{ display:block; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:2px; }
.pay-strip .pay-methods strong{ font-family:var(--serif); font-size:21px; font-weight:600; color:var(--gold-bright); overflow-wrap:anywhere; }
.pay-strip .pay-note{ margin:14px 0 0; font-size:14px; color:var(--bone-faint); }
@media (max-width:420px){ .pay-strip .pay-methods{ grid-template-columns:1fr; } }
.coupon-card .coupon-subtitle{ font-family:var(--script); font-size:26px; color:var(--gold-bright); margin:4px 0 0; line-height:1.1; }
@media (max-width:520px){ .event-frame.is-flyer{ padding:4px; } }

/* ============================================================
   PUBLIC UPCOMING EVENTS — database-driven (events.php + homepage)
   Classes replace inline styles so the pages work under the
   site's Content-Security-Policy. Visual design unchanged.
   ============================================================ */
.page-hero .hero-media.hero-media-events{ background-image:url('../images/guests-mingling.jpg'); }
.event-card .btn.btn-fit{ width:fit-content; }
.notice.notice-spaced{ margin-top:60px; }

/* Event without an uploaded image: branded key on the dark flyer panel (never a broken image) */
.event-card.is-flyer .thumb.thumb-fallback{
  display:flex; align-items:center; justify-content:center; aspect-ratio:1024 / 472;
  background:radial-gradient(ellipse at 50% 45%, rgba(200,161,92,0.16), transparent 70%), var(--panel);
}
.event-card.is-flyer .thumb.thumb-fallback img{ width:min(140px, 30%); height:auto; object-fit:contain; filter:none; opacity:0.9; }

/* No upcoming public events */
.events-empty{ text-align:center; max-width:640px; margin:0 auto; }
.events-empty-key{ width:110px; margin:0 auto 28px; opacity:0.9; }
.events-empty .notice{ text-align:left; }
.events-empty-cta{ margin:34px 0 0; }

/* Homepage "Upcoming Event": filled from api/next-event.php by js/home-event.js */
.event-live[hidden], .event-empty[hidden]{ display:none; }
.event-frame.is-fallback{ display:flex; align-items:center; justify-content:center; aspect-ratio:1024 / 472;
  background:radial-gradient(ellipse at 50% 45%, rgba(200,161,92,0.16), transparent 70%), var(--panel); }
.event-frame.is-fallback img{ width:min(150px, 30%); height:auto; }
.event-cta .btn + .btn{ margin-left:16px; }
.event-empty{ max-width:640px; margin:0 auto; text-align:center; }
.event-empty .notice{ text-align:left; }

/* Admin-entered text can contain long unbroken words (e.g. a pasted link): let it wrap
   instead of pushing the page sideways on phones. */
.event-card .body{ min-width:0; }
.event-card .date, .event-card h3, .event-card .event-subtitle, .event-card p.desc, .event-card .meta span,
.event-caption{ overflow-wrap:anywhere; }

/* ======================================================================
   VISUAL PASS — art-directed heroes, antique-key brand system,
   editorial events. Presentation only: no content or behaviour changes.
   Keys: brass (hero, story) · horizontal bronze (event, dividers) ·
   vertical copper (membership).
   ====================================================================== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- key divider: ──── key ──── (used sparingly, only where a hero hands over to content) ---- */
.key-divider{ display:flex; align-items:center; justify-content:center; gap:22px; max-width:520px; margin:0 auto; }
.key-divider::before, .key-divider::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold-dim)); }
.key-divider::after{ background:linear-gradient(90deg, var(--gold-dim), transparent); }
.key-divider img{ width:96px; height:auto; display:block; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6)); }
.key-divider.is-left{ justify-content:flex-start; max-width:400px; margin:0 0 30px; }
.key-divider.is-left::before{ flex:0 0 0; }

/* ---- HOMEPAGE HERO: Homepage.png emerging from the dark on the right ---- */
.hero.hero-home{ min-height:clamp(640px, 100vh, 960px); align-items:center; padding:150px 0 110px; background:var(--ink); }
.hero-home .hero-photo{ position:absolute; inset:0 0 0 24%; z-index:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 34%); mask-image:linear-gradient(90deg, transparent 0%, #000 34%); }
.hero-home .hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:40% 60%; display:block;
  filter:saturate(1.05) contrast(1.04); transform:scale(1.045); transition:transform 2.6s cubic-bezier(.2,.7,.2,1); }
.hero-home.loaded .hero-photo img{ transform:scale(1); }
.hero-home .hero-shade{ position:absolute; inset:0; z-index:1; pointer-events:none; background:
  linear-gradient(90deg, rgba(11,9,8,0.97) 0%, rgba(11,9,8,0.88) 30%, rgba(11,9,8,0.42) 52%, rgba(11,9,8,0.06) 74%, rgba(11,9,8,0) 100%),
  linear-gradient(180deg, rgba(11,9,8,0.62) 0%, rgba(11,9,8,0) 22%, rgba(11,9,8,0) 72%, var(--ink) 100%); }
.hero-home .hero-key{ position:absolute; z-index:2; left:clamp(-10px, 2vw, 40px); bottom:-64px; height:min(58vh, 430px);
  transform:rotate(-17deg) translateY(24px); transform-origin:50% 100%; opacity:0;
  -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 100%); mask-image:linear-gradient(180deg, #000 72%, transparent 100%);
  transition:opacity 1.8s ease .6s, transform 1.8s cubic-bezier(.2,.7,.2,1) .6s; pointer-events:none; }
.hero-home .hero-key img{ height:100%; width:auto; display:block; filter:drop-shadow(22px 26px 28px rgba(0,0,0,0.75)) brightness(0.94); }
.hero-home.loaded .hero-key{ opacity:1; transform:rotate(-17deg) translateY(0); }
.hero-home .wrap{ z-index:3; }
.hero-home .hero-inner{ max-width:600px; }
.hero-home h1{ font-weight:600; text-transform:uppercase; letter-spacing:0.02em; font-size:clamp(44px, 6vw, 86px); line-height:0.98; margin:0 0 22px; }
.hero-home h1 .script{ display:block; font-family:var(--script); font-weight:400; text-transform:none; letter-spacing:0;
  font-size:clamp(52px, 6.6vw, 96px); line-height:1; margin:0 0 -0.06em -0.04em; color:var(--gold); }
.hero-home .kicker{ font-style:normal; text-transform:uppercase; letter-spacing:0.34em; font-size:clamp(12px, 1.1vw, 14.5px); color:var(--bone); margin:0 0 26px; }
.hero-home .key-divider{ opacity:0; transform:translateY(12px); transition:opacity 1.1s ease .46s, transform 1.1s ease .46s; }
.hero-home.loaded .key-divider{ opacity:1; transform:none; }
.hero-home .lede{ color:var(--bone); opacity:0.86; font-size:clamp(18px, 1.5vw, 21px); line-height:1.6; }
.hero-home .scroll-cue{ z-index:3; }
@media (min-width:1024px){ .hero-home .hero-inner{ margin-left:calc(clamp(150px, 16vw, 250px) - clamp(0px, (100vw - 1266px) * 0.6, 90px)); } }   /* hero copy sits further into the dark side of the photo; the shift tapers on narrower desktops to keep clear of the key */
@media (max-width:1023px){
  .hero-home .hero-key{ display:none; }
  .hero-home .hero-photo{ inset:0; -webkit-mask-image:none; mask-image:none; }
  .hero-home .hero-photo img{ object-position:38% 55%; }
  .hero-home .hero-shade{ background:linear-gradient(90deg, rgba(11,9,8,0.95) 0%, rgba(11,9,8,0.8) 45%, rgba(11,9,8,0.25) 80%, rgba(11,9,8,0.1) 100%),
    linear-gradient(180deg, rgba(11,9,8,0.6) 0%, rgba(11,9,8,0) 25%, rgba(11,9,8,0) 70%, var(--ink) 100%); }
}
@media (max-width:760px){
  .hero.hero-home{ min-height:100svh; align-items:flex-end; padding:0 0 64px; }
  .hero-home .hero-photo img{ object-position:50% 38%; }
  .hero-home .hero-shade{ background:linear-gradient(180deg, rgba(11,9,8,0.5) 0%, rgba(11,9,8,0.06) 24%, rgba(11,9,8,0.35) 44%, rgba(11,9,8,0.9) 62%, var(--ink) 84%); }
  .hero-home .kicker{ letter-spacing:0.24em; }
  .hero-home .key-divider.is-left{ max-width:300px; margin-bottom:22px; }
  .hero-home .lede{ font-size:17.5px; margin-bottom:30px; }
  .hero-home .scroll-cue{ display:none; }
}

/* ---- HOMEPAGE UPCOMING EVENT: content left, flyer or horizontal key right ---- */
.event.event-home{ position:relative; overflow:hidden;
  background:radial-gradient(ellipse 55% 70% at 80% 50%, rgba(200,161,92,0.09), transparent 70%), var(--ink); }
.event-layout{ display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); grid-template-areas:"head art" "copy art";
  column-gap:clamp(40px, 6vw, 100px); align-items:center; }
.event-layout .event-head{ grid-area:head; text-align:left; max-width:none; margin:0 0 26px; align-self:end; }
.event-layout .event-head .eyebrow{ justify-content:flex-start; }
.event-layout .event-head h2{ margin:0 0 14px; }
.event-layout .event-head .lede{ font-size:19px; color:var(--bone-dim); margin:0; }
.event-home .event-live, .event-home .event-empty{ display:contents; }
.event-home .event-live[hidden], .event-home .event-empty[hidden]{ display:none; }
.event-copy, .event-empty-copy{ grid-area:copy; align-self:start; }
.event-home .event-caption{ text-align:left; margin:0 0 30px; }
.event-home #nextEventTitle{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(28px, 3vw, 40px); line-height:1.15; color:var(--bone); margin:0 0 12px; }
.event-home #nextEventWhen{ display:block; font-family:var(--body); font-size:13.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); line-height:1.7; }
.event-home .event-cta{ justify-content:flex-start; margin-top:0; }
.event-home .event-frame{ grid-area:art; max-width:none; width:100%; margin:0; padding:0; background:#000; overflow:visible;
  border:1px solid var(--hair-strong); box-shadow:0 48px 90px -40px rgba(0,0,0,0.9); }
.event-home .event-frame.is-flyer::after{ content:""; position:absolute; left:-44px; bottom:-30px; width:190px; height:46px;
  background:url('../images/key-horizontal.webp') center / contain no-repeat; filter:drop-shadow(0 10px 14px rgba(0,0,0,0.8)); opacity:0.95; pointer-events:none; }
/* no flyer: the horizontal key becomes the art, with a soft pool of light */
.event-home .event-frame.is-fallback, .event-empty-art{ grid-area:art; position:relative; aspect-ratio:auto; min-height:clamp(170px, 20vw, 280px);
  border:0; box-shadow:none; background:radial-gradient(ellipse 50% 55% at 50% 58%, rgba(200,161,92,0.18), transparent 72%); }
.event-home .event-frame.is-fallback img{ display:none; }
.event-home .event-frame.is-fallback::before{ content:""; position:absolute; inset:14% 3%;
  background:url('../images/key-horizontal.webp') center / contain no-repeat; filter:drop-shadow(0 22px 26px rgba(0,0,0,0.8)); }
.event-empty-art{ display:flex; align-items:center; justify-content:center; }
.event-empty-art img{ width:88%; max-width:560px; height:auto; filter:drop-shadow(0 22px 26px rgba(0,0,0,0.8)); }
.event-home .event-empty-copy .notice{ text-align:left; margin:0 0 30px; }
@media (max-width:860px){
  .event-layout{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "art" "copy"; row-gap:34px; }
  .event-layout .event-head{ margin:0; }
  .event-home .event-frame.is-flyer::after{ left:auto; right:-8px; width:140px; height:34px; bottom:-22px; }
  .event-home .event-frame.is-fallback, .event-empty-art{ min-height:150px; }
}

/* ---- ART HEROES (events / membership / contact): the artwork carries the title ---- */
.art-hero{ position:relative; background:#000; overflow:hidden; }
.art-hero > picture > img{ display:block; width:100%; height:auto; aspect-ratio:2043 / 770; object-fit:cover; max-height:88vh; }
.art-hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:150px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0.62), transparent); }
.art-hero::after{ content:""; position:absolute; inset:auto 0 0 0; height:26%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--ink)); }
.art-hero.is-events > picture > img{ object-position:50% 55%; }
.art-hero.is-membership > picture > img{ object-position:58% 52%; }
.art-hero.is-contact > picture > img{ object-position:50% 50%; }
@media (max-width:760px){
  .art-hero{ margin-top:0; }
  .art-hero > picture > img{ aspect-ratio:4 / 3; max-height:none; }
  .art-hero::before{ height:110px; }
}
.page-intro{ text-align:center; padding:54px 0 12px; }
.page-intro .crumb{ font-family:var(--body); font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bone-faint); margin:26px 0 12px; }
.page-intro .crumb a{ color:var(--bone-dim); }
.page-intro .crumb a:hover{ color:var(--gold-bright); }
.page-intro .sub{ font-family:var(--body); font-style:italic; font-size:clamp(19px, 2vw, 23px); color:var(--bone-dim); max-width:52ch; margin:0 auto; }
.page-intro + .section-pad{ padding-top:clamp(56px, 7vw, 90px); }

/* photographic page heroes (story, gallery) fade into the page like the art heroes */
.page-hero::after{ content:""; position:absolute; inset:auto 0 0 0; height:30%; z-index:1; pointer-events:none; background:linear-gradient(180deg, transparent, var(--ink)); }

/* ---- EVENTS PAGE: editorial cards ---- */
.event-card-grid.editorial{ gap:clamp(40px, 5vw, 64px); background:none; }
.event-card.ev-editorial{ display:block; border:1px solid var(--hair-strong); background:linear-gradient(180deg, var(--panel), var(--ink));
  transition:border-color .45s ease, transform .45s ease; }
.event-card.ev-editorial:hover{ border-color:var(--gold-dim); transform:translateY(-2px); }
.ev-editorial .thumb{ border-bottom:1px solid var(--hair-strong); }
.ev-editorial .body{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(24px, 3vw, 40px); align-items:start; padding:clamp(28px, 3.4vw, 44px); }
.ev-date{ text-align:center; padding:4px clamp(20px, 2.6vw, 34px) 0 0; border-right:1px solid var(--hair-strong); min-width:84px; }
.ev-date .m{ display:block; font-family:var(--body); font-size:13px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin:0 0 6px; }
.ev-date .d{ display:block; font-family:var(--serif); font-size:clamp(46px, 5vw, 60px); line-height:1; color:var(--bone); }
.ev-editorial h3{ font-family:var(--serif); font-weight:500; text-transform:uppercase; letter-spacing:0.03em; font-size:clamp(26px, 3.2vw, 40px); line-height:1.1; margin:0 0 8px; }
.ev-editorial .event-subtitle{ font-size:clamp(26px, 3vw, 34px); margin:0 0 14px; }
.ev-editorial .ev-meta{ font-family:var(--body); font-size:13.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; overflow-wrap:anywhere; }
.ev-editorial p.desc{ margin:0 0 24px; }
.ev-editorial .event-card-cta{ grid-column:2; }
.event-card.is-flyer.ev-editorial .thumb.thumb-fallback{ background:radial-gradient(ellipse 50% 60% at 50% 55%, rgba(200,161,92,0.16), transparent 72%), var(--ink); }
.event-card.is-flyer.ev-editorial .thumb.thumb-fallback img{ width:min(460px, 70%); opacity:1; filter:drop-shadow(0 18px 22px rgba(0,0,0,0.8)); }
@media (max-width:640px){
  .ev-editorial .body{ grid-template-columns:minmax(0,1fr); row-gap:18px; }
  .ev-date{ display:flex; align-items:baseline; gap:12px; text-align:left; border-right:0; border-bottom:1px solid var(--hair-strong); padding:0 0 14px; }
  .ev-date .m{ margin:0; }
  .ev-date .d{ font-size:40px; }
  .ev-editorial .event-card-cta{ grid-column:1; }
}

/* ---- MEMBERSHIP: one vertical copper key beside the philosophy ---- */
.membership-philosophy{ position:relative; }
.deco-key-vertical{ position:absolute; right:clamp(0px, 4vw, 60px); top:clamp(40px, 6vw, 90px); height:clamp(320px, 34vw, 440px); pointer-events:none; }
.deco-key-vertical img{ height:100%; width:auto; display:block; transform:rotate(8deg); filter:drop-shadow(18px 24px 26px rgba(0,0,0,0.75)); opacity:0.95; }
@media (max-width:1100px){ .deco-key-vertical{ display:none; } }

/* ---- STORY: the brass key replaces the old gold logo key ---- */
.keyhole-frame .key-photo-antique{ display:block; margin:0 auto 30px; height:300px; width:auto; }
.keyhole-frame .key-photo-antique img{ height:100%; width:auto; display:block; margin:0 auto; filter:drop-shadow(14px 20px 22px rgba(0,0,0,0.75)); }

/* ---- CONTACT / FORMS: integrated with the brand ---- */
.form-panel{ border:1px solid var(--hair-strong); background:linear-gradient(180deg, var(--panel), var(--ink-soft)); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:1px solid var(--gold-bright); outline-offset:2px; }

/* ---- GALLERY: large photography, clean grid, minimal labels ---- */
.gallery-grid{ gap:clamp(10px, 1.4vw, 18px); background:none; }
.gallery-grid figure{ border:0; }
.gallery-grid figcaption{ letter-spacing:0.18em; }

/* ---- buttons: restrained, substantial ---- */
.btn.solid{ transition:filter .35s ease, transform .35s ease, box-shadow .35s ease; }
.btn.solid:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 10px 26px -12px rgba(234,208,143,0.45); }
@media (prefers-reduced-motion: reduce){
  .hero-home .hero-photo img, .hero-home .hero-key, .hero-home .key-divider{ transition:none; transform:none; }
  .hero-home.loaded .hero-key{ transform:rotate(-17deg); }
  .event-card.ev-editorial, .btn.solid{ transition:none; }
}
.hero-home.loaded h1{ transition-delay:.1s; }
.hero-home.loaded .kicker{ transition-delay:.32s; }
.hero-home.loaded .lede{ transition-delay:.58s; }
.hero-home.loaded .cta-row{ transition-delay:.74s; }

/* ---- ART HEROES v2: clean photographs + real HTML titles placed by composition ---- */
.art-hero{ height:clamp(480px, 37.7vw, 820px); }
.art-hero > picture{ position:absolute; inset:0; }
.art-hero > picture > img{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; max-height:none; object-fit:cover; }
.art-hero-content{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:108px 5vw 4%; }
.art-hero.is-events .art-hero-content{ padding-top:150px; }
.art-hero.is-membership .art-hero-content{ padding-left:16vw; }            /* composition's empty wall sits right of centre */
.art-hero-title{ position:relative; text-align:center; max-width:780px; }
.art-hero-title::before{ content:""; position:absolute; inset:-34% -22%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.58), rgba(0,0,0,0.25) 45%, transparent 70%); }
.art-hero h1{ font-family:var(--serif); font-weight:500; text-transform:uppercase; letter-spacing:0.14em; line-height:1;
  font-size:clamp(46px, 6vw, 96px); margin:0 0 20px;
  color:transparent; background:linear-gradient(180deg, #F6EBD0 0%, #E6CB92 42%, #B99452 100%); -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,0.7)); }
.art-hero h1 .script{ display:block; font-family:var(--script); text-transform:none; letter-spacing:0; font-weight:400;
  font-size:0.62em; line-height:1.05; margin:0 0 0.02em; }
.art-hero .key-divider{ max-width:440px; margin:0 auto 18px; }
.art-hero-crumb{ font-family:var(--body); font-size:12.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--bone-dim); margin:0 0 18px; }
.art-hero-crumb a{ color:var(--bone-dim); } .art-hero-crumb a:hover{ color:var(--gold-bright); }
.art-hero-sub{ font-family:var(--body); font-style:italic; font-size:clamp(17px, 1.5vw, 21px); color:var(--bone); opacity:0.88; max-width:46ch; margin:0 auto; }
.art-hero + .section-pad{ padding-top:clamp(56px, 7vw, 96px); }
@media (max-width:1023px){ .art-hero.is-membership .art-hero-content{ padding-left:5vw; } }
@media (max-width:760px){
  .art-hero{ height:min(84svh, 640px); }
  .art-hero.is-events > picture > img{ object-position:50% 50%; }
  .art-hero.is-membership > picture > img{ object-position:20% 50%; }
  .art-hero.is-contact > picture > img{ object-position:10% 55%; }
  .art-hero::after{ height:62%; background:linear-gradient(180deg, transparent, rgba(11,9,8,0.82) 55%, var(--ink)); }
  .art-hero-content, .art-hero.is-events .art-hero-content{ align-items:flex-end; padding:0 22px 44px; }
  .art-hero-title::before{ display:none; }
  .art-hero h1{ font-size:clamp(40px, 12vw, 58px); letter-spacing:0.1em; margin-bottom:16px; }
  .art-hero .key-divider{ max-width:300px; }
  .art-hero .key-divider img{ width:80px; }
}

/* homepage headline stays on one line on desktop, as in the reference */
.hero-home .hero-inner{ max-width:720px; }
.hero-home .lede{ max-width:520px; }
@media (min-width:1024px){ .hero-home h1{ white-space:nowrap; } }

/* ======================================================================
   PRIVACY & POLICIES — readability first: no photography behind text,
   comfortable measure, clear hierarchy, one key between sections.
   ====================================================================== */
.policy-hero{ padding:clamp(150px, 16vw, 200px) 0 clamp(40px, 5vw, 60px); text-align:center;
  background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(200,161,92,0.10), transparent 70%), var(--ink); border-bottom:1px solid var(--hair); }
.policy-hero .crumb{ font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bone-faint); margin:0 0 18px; }
.policy-hero .crumb a{ color:var(--bone-dim); }
.policy-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(40px, 5.4vw, 72px); line-height:1.05; color:var(--bone); margin:0 0 22px; }
.policy-hero .key-divider{ margin-bottom:34px; }
.policy-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; }
.policy-nav a{ display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; border:1px solid var(--hair-strong);
  font-family:var(--body); font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-bright);
  transition:border-color .3s ease, background-color .3s ease; }
.policy-nav a:hover, .policy-nav a:focus-visible{ border-color:var(--gold); background:rgba(200,161,92,0.07); }
.policy-body{ padding:clamp(56px, 7vw, 96px) 0 clamp(80px, 9vw, 120px); }
.policy-wrap{ max-width:800px; }
.policy{ scroll-margin-top:110px; }
.policy h2{ font-family:var(--serif); font-weight:500; text-transform:uppercase; letter-spacing:0.06em; font-size:clamp(26px, 3vw, 36px);
  line-height:1.2; color:var(--gold-bright); margin:0 0 14px; }
.policy h3{ font-family:var(--serif); font-weight:500; font-size:clamp(20px, 2vw, 23px); color:var(--bone); margin:38px 0 10px; }
.policy p{ font-family:var(--body); font-size:clamp(17.5px, 1.3vw, 19px); line-height:1.75; color:var(--bone-dim); margin:0 0 16px; overflow-wrap:anywhere; }
.policy strong{ color:var(--bone); font-weight:600; }
.policy a{ color:var(--gold-bright); border-bottom:1px solid var(--hair-strong); }
.policy a:hover{ border-bottom-color:var(--gold); }
.policy .policy-effective{ font-size:14px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin:0 0 30px; }
.policy .policy-tagline{ font-family:var(--serif); font-style:italic; font-size:clamp(19px, 1.8vw, 22px); color:var(--bone); margin:0 0 30px; }
.policy-rules{ list-style:none; margin:30px 0 0; padding:0; }
.policy-rules li{ padding:22px 0 18px; border-top:1px solid var(--hair); }
.policy-rules li:last-child{ border-bottom:1px solid var(--hair); }
.policy-rules .rule-num{ font-family:var(--serif); font-size:1.15em; color:var(--gold); margin-right:4px; }
.policy-rules li p + p{ margin-top:10px; }
.policy-top{ margin:28px 0 0 !important; font-size:13px !important; letter-spacing:0.16em; text-transform:uppercase; }
.policy-top a{ border:0; color:var(--bone-faint); }
.policy-sep{ margin:clamp(56px, 7vw, 84px) auto; }
.footer-legal{ color:var(--bone-dim); font-size:14px; letter-spacing:0.06em; margin-left:auto; margin-right:24px; }
.footer-legal:hover{ color:var(--gold-bright); }
.form-policy-note, .policy-link-note{ font-family:var(--body); font-size:15.5px; color:var(--bone-faint); line-height:1.6; margin:0 0 18px; }
.form-policy-note a, .policy-link-note a{ color:var(--gold-bright); border-bottom:1px solid var(--hair-strong); }
.policy-link-note{ text-align:center; margin:44px 0 0; letter-spacing:0.08em; }
@media (max-width:640px){
  .policy-nav ul{ flex-direction:column; align-items:stretch; max-width:340px; margin:0 auto; }
  .policy-nav a{ justify-content:center; }
  .footer-legal{ margin:0; }
}

/* homepage hero key: keep the ornate head on screen (it rotates about its base) */
.hero-home .hero-key{ left:clamp(70px, 7.5vw, 140px); }
@media (max-width:640px){ .policy-nav li{ display:block; } .policy-nav a{ display:flex; width:100%; } }

/* ======================================================================
   HOMEPAGE HERO — lounge photograph across the full width; the complete
   antique key rises from the dark left side (nothing cropped or faded).
   ====================================================================== */
.hero-home .hero-photo{ inset:0; -webkit-mask-image:none; mask-image:none; }
.hero-home .hero-photo img{ object-position:50% 55%; }
.hero-home .hero-key{ left:clamp(46px, calc(5.5vw - 8px), 72px); bottom:70px;
  height:min(clamp(250px, calc(40vw - 150px), 440px), calc(100% - 250px));
  transform-origin:50% 50%; -webkit-mask-image:none; mask-image:none; }
.hero-home .hero-key img{ object-fit:contain; }
@media (max-width:1023px){ .hero-home .hero-photo img{ object-position:58% 55%; } }   /* dining table in view */
@media (max-width:760px){ .hero-home .hero-photo img{ object-position:50% 50%; } }   /* portrait crop already centred on the table */

/* header: room for "Privacy & Policies" without changing the design */
nav.primary a.navlink{ white-space:nowrap; }
@media (min-width:981px) and (max-width:1280px){
  nav.primary{ gap:24px; }
  nav.primary ul{ gap:22px; }
  nav.primary a.navlink{ font-size:15px; }
}

/* Privacy & Policies: wide premium policy layout */
.policy-wrap{ width:90%; max-width:1400px; margin:0 auto; }
@media (max-width:760px){ .policy-wrap{ width:100%; } }
/* tablets & phones: the same key, smaller, in the dark space above the text (hidden only where there is no room) */
@media (max-width:1023px){
  .hero-home .hero-key{ display:block; left:36px; top:106px; bottom:auto; height:min(160px, calc(50vh - 340px)); }
}
@media (min-width:761px) and (max-width:1023px) and (max-height:880px){ .hero-home .hero-key{ display:none; } }
@media (max-width:760px){ .hero-home .hero-key{ left:32px; height:min(170px, calc(90svh - 530px)); } }
@media (max-width:760px) and (max-height:690px){ .hero-home .hero-key{ display:none; } }
@media (max-width:340px){ .hero-home .hero-key{ height:min(150px, calc(90svh - 610px)); } }
@media (max-width:340px) and (max-height:800px){ .hero-home .hero-key{ display:none; } }

/* ======================================================================
   FINAL CLIENT PASS
   ====================================================================== */
/* logos: header 1.5×, footer 1.25× */
.brandmark img{ height:60px; }
footer .fbrand img{ height:38px; }

/* internal page heroes: general.png (Contact: Contact_Updated.png) behind real HTML headings */
.art-hero .art-hero-content, .art-hero.is-events .art-hero-content{ padding-top:150px; }
.art-hero.is-membership .art-hero-content{ padding-left:5vw; }
.art-hero > picture > img, .art-hero.is-events > picture > img, .art-hero.is-membership > picture > img, .art-hero.is-contact > picture > img{ object-position:50% 50%; }
@media (max-width:760px){
  .art-hero{ height:min(74svh, 580px); }
  .art-hero .art-hero-content, .art-hero.is-events .art-hero-content{ padding-top:0; }
  .art-hero > picture > img, .art-hero.is-events > picture > img, .art-hero.is-membership > picture > img{ object-position:56% 50%; }
  .art-hero.is-contact > picture > img{ object-position:14% 55%; }   /* the telephone */
}

/* Privacy & Policies: the four section buttons sit in a band below the hero */
.policy-intro{ padding:clamp(28px, 4vw, 44px) 0; border-bottom:1px solid var(--hair); background:var(--ink); }

/* homepage next event: show the event's own image, no decorative key beside it */
.event-home .event-frame.is-flyer::after{ content:none; display:none; }
.event-home .event-frame.is-fallback{ aspect-ratio:16 / 9; min-height:0; border:1px solid var(--hair-strong); box-shadow:0 48px 90px -40px rgba(0,0,0,0.9); }
.event-home .event-frame.is-fallback::before{ inset:0; background:url('../images/hero-general-1200.webp') center / cover no-repeat; filter:none; }

/* homepage hero key on tablets/phones: below the larger (1.5×) header logo */
@media (max-width:1023px){ .hero-home .hero-key{ top:132px; height:min(150px, calc(50vh - 366px)); } }
@media (max-width:760px){ .hero-home .hero-key{ height:min(160px, calc(90svh - 556px)); } }
@media (max-width:340px){ .hero-home .hero-key{ height:min(140px, calc(90svh - 636px)); } }