[html]
<style>
:root{--paper:#f3eee5;--paper-2:#e9e1d5;--ink:#2d2924;--muted:#776f65;--line:#c9beae;--gold:#9a7d50;--wash:rgba(154,125,80,.10)}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:transparent;color:var(--ink)}body{font-family:Montserrat,Arial,sans-serif}#ba-join.dark{--paper:#1e1b18;--paper-2:#28231d;--ink:#e7ded0;--muted:#aaa092;--line:#4d4336;--gold:#c2a36e;--wash:rgba(194,163,110,.10)}
#ba-join{width:100%;max-width:1080px;margin:0 auto;background:var(--paper);border:1px solid var(--line);overflow:hidden;position:relative;color:var(--ink)}
#ba-join:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;background:repeating-linear-gradient(115deg,transparent 0,transparent 24px,var(--wash) 25px,transparent 26px)}
#ba-join>*{position:relative}
.bj-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);min-height:350px;border-bottom:1px solid var(--line)}
.bj-title{padding:54px 58px 50px;display:flex;flex-direction:column;justify-content:center}
.bj-kicker,.bj-over,.bj-step small,.bj-foot span{font-size:9px;line-height:1.4;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:700}
.bj-title h1{margin:18px 0 28px;font:400 clamp(42px,7vw,70px)/.94 Georgia,serif;letter-spacing:-2px;text-transform:uppercase;color:var(--ink)}
.bj-title p{max-width:610px;margin:0;position:relative;font:italic 16px/1.8 Georgia,serif;color:var(--muted)}
.bj-title p:before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--gold)}.bj-title p span{display:block;margin-left:20px}
.bj-photo{border-left:1px solid var(--line);background:var(--paper-2);position:relative;overflow:hidden;min-height:350px}.bj-photo img{display:block;width:100%;height:100%;min-height:350px;object-fit:cover;object-position:center;filter:saturate(.82) contrast(.96);opacity:.96}#ba-join.dark .bj-photo img{filter:saturate(.78) contrast(1.03);opacity:.92}
.bj-intro{padding:38px 58px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:160px 1fr;gap:36px;align-items:start}.bj-over{padding-top:6px}.bj-prose p{margin:0;font:15px/1.8 Georgia,serif;color:var(--muted)}.bj-prose strong{font-weight:400;color:var(--ink);font-size:18px}.bj-prose p+p{margin-top:12px}
.bj-note{margin:30px 58px;padding:20px 24px;border:1px solid var(--gold);background:var(--wash);display:grid;grid-template-columns:160px 1fr;gap:34px;align-items:center}.bj-note b{font:400 18px/1.35 Georgia,serif;color:var(--ink)}.bj-note span{font:italic 13px/1.75 Georgia,serif;color:var(--muted)}
.bj-route{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.bj-step{padding:36px 34px 38px;border-left:1px solid var(--line)}.bj-step:first-child{border-left:0}.bj-num{display:block;margin-bottom:12px;font:400 32px/1 Georgia,serif;color:var(--gold)}.bj-step h2{margin:0 0 10px;font:400 23px/1.2 Georgia,serif;color:var(--ink)}.bj-step p{margin:0;font:13px/1.75 Georgia,serif;color:var(--muted)}
.bj-foot{padding:22px 58px;display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--paper-2)}.bj-foot strong{font:400 18px/1.3 Georgia,serif;color:var(--ink)}.bj-foot span{text-align:right}
@media(max-width:700px){.bj-hero{grid-template-columns:1fr}.bj-title{padding:36px 25px}.bj-photo{min-height:260px;border-left:0;border-top:1px solid var(--line)}.bj-photo img{min-height:260px}.bj-intro{grid-template-columns:1fr;gap:16px;padding:28px 25px}.bj-note{margin:24px 25px;grid-template-columns:1fr;gap:10px}.bj-route{grid-template-columns:1fr}.bj-step{padding:26px 25px;border-left:0;border-top:1px solid var(--line)}.bj-step:first-child{border-top:0}.bj-foot{display:block;padding:22px 25px}.bj-foot span{display:block;text-align:left;margin-top:9px}}
</style>
<section id="ba-join">
  <header class="bj-hero">
    <div class="bj-title">
      <div class="bj-kicker">Bad Atmosphere / Character Help</div>
      <h1>Хочу<br>к вам</h1>
      <p><span>Не знаете, кого играть, ищете родню, друзей, бывших, врагов или просто зашли посмотреть и почему-то остались?</span></p>
    </div>
    <div class="bj-photo" aria-hidden="true"><img src="https://forumstatic.ru/files/001c/c5/0d/25611.png" alt=""></div>
  </header>
  <section class="bj-intro">
    <div class="bj-over">Open seat<br>New York City</div>
    <div class="bj-prose">
      <p><strong>Пишите сюда.</strong></p>
      <p>Мы поможем придумать персонажа, найдём ему связи и очень быстро встроим в местную жизнь. Возможно, даже слишком быстро.</p>
    </div>
  </section>
  <div class="bj-note"><b>Приходите с тем, что уже есть.</b><span>С готовым концептом, обрывком идеи, любимой динамикой или просто со словами «хочу что-нибудь странное».</span></div>
  <section class="bj-route">
    <div class="bj-step"><span class="bj-num">01</span><small>Character</small><h2>Персонаж</h2><p>Расскажите, что уже придумали — даже если это всего одна деталь.</p></div>
    <div class="bj-step"><span class="bj-num">02</span><small>Connections</small><h2>Связи</h2><p>Родня, друзья, бывшие, враги, коллеги и прочие источники проблем.</p></div>
    <div class="bj-step"><span class="bj-num">03</span><small>Entry point</small><h2>Игра</h2><p>Подберём людей, идеи и точку входа, с которой удобно начинать.</p></div>
  </section>
  <footer class="bj-foot"><strong>Место за столом уже есть.</strong><span>Come as you are · We will handle the rest</span></footer>
</section>
<script>(function(){var root=document.getElementById('ba-join');if(!root)return;function setTheme(theme){root.classList.toggle('dark',theme==='dark')}window.addEventListener('message',function(e){if(e.data&&e.data.type==='BA_HTML_THEME')setTheme(e.data.theme)});parent.postMessage({type:'BA_HTML_THEME_READY'},'*')})();</script>
[/html]