/* The Lion's Den | shared base for thelionsden.io and events.thelionsden.io (v1, 2026-10-16)
   Keep this file byte-identical on both sites, like nav.css.
   Load it after the site stylesheet (home.css / staffing.css / site.css) and before nav.css.
   It holds the shared spacing scale and the phone layout: one side inset, one section rhythm,
   one hero rhythm, and justified body text. */
:root{--gx:20px;--sec:48px;--hero-t:40px;--hero-b:48px;--gap-h1:20px;--gap-cta:28px;--gap-head:24px}

@media (max-width:760px){
  /* one side inset */
  .wrap{padding-left:var(--gx);padding-right:var(--gx)}
  .doc{padding:var(--sec) var(--gx)}

  /* one section rhythm (continuation sections that set padding-top:0 keep it) */
  section,.den,.band,.sx main>section:not(.sx-hero),.sx main>section.sx-dark,.sx main>section.sx-cream,.sx main>.band{padding-top:var(--sec);padding-bottom:var(--sec)}
  .hero,.doc-hero,.sx-hero-in{padding-top:var(--hero-t);padding-bottom:var(--hero-b)}
  footer{padding-top:40px;padding-bottom:32px}

  /* one hero rhythm: eyebrow 20 > headline 20 > text 28 > button 12 > note */
  .hero .lede,.sx-hero .lede{margin-top:var(--gap-h1)}
  .hero .lede{margin-bottom:0}
  .hero .skool-cta,.hero-cta,.st-ctas,.hero .facts{margin-top:var(--gap-cta)}
  .hero .facts{margin-bottom:var(--gap-cta)}
  .hero .sub{margin-top:12px}
  .eyebrow{display:block;letter-spacing:.1em}
  .eyebrow .claw{margin-right:8px}

  /* one heading rhythm: kicker 12 > h2 16 > intro 24 > content */
  .kicker{margin-bottom:12px}
  h2{margin-bottom:16px}
  .intro,.den .intro,.community .intro{margin-bottom:var(--gap-head)}
  .sx-h{margin-bottom:var(--gap-head)}

  /* paragraphs justified; list items left-aligned (bullets and short card items stretch badly on a phone) */
  .lede,.intro,.den-copy p,.events p,.stt-copy>p,.side>p,.card p,.host p,.ev p:not(.where),
  .seat p,details p,.doc p,.st-page .tcard{
    text-align:justify;text-align-last:left;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:5 2 2;text-wrap:pretty}
  main li,main li *,.doc li,.doc li *{text-align:left;text-align-last:auto}
  .doc p:has(>b:first-child){text-align:left}
  /* short card text (2-3 lines) stays left: justifying it leaves big holes */
  .perk,.perk b,.perk span,.syl p,.st-page .tcard.short{text-align:left;text-align-last:auto}
  .perk::before{margin-left:0;margin-right:0}
  .band p{text-align:justify;text-align-last:center;-webkit-hyphens:auto;hyphens:auto}

  /* keep short labels whole */
  .btn.big{text-wrap:balance}
  .cta-note a{white-space:nowrap}

  /* hero label + headline centered under the centered logo (Nathan, 2026-10-16); the paragraph stays justified */
  .hero .eyebrow,.sx-hero .eyebrow,.hero h1,.sx-hero h1,.doc-hero h1,.doc-hero p{text-align:center;margin-left:auto;margin-right:auto;text-wrap:balance}

  /* section headings + their kicker label centered too (Nathan, 2026-10-16); legal-page h2s and form-step h2s stay left */
  main section h2:not(.q-sec h2),main section .kicker{text-align:center;text-wrap:balance;margin-left:auto;margin-right:auto}
  main section .kicker b{margin-right:8px}

  /* staffing trust lines: a wrapped line stays under its text, not under the slashes */
  .trust li{display:grid;grid-template-columns:2.1em 1fr}
}

/* narrowest phones (320-374px: iPhone SE 1st gen, Galaxy Z Fold cover, small Androids) */
@media (max-width:374px){
  .eyebrow{font-size:12px;letter-spacing:.06em}
  .hero h1,.sx-hero h1{font-size:42px}
  .lede,.sx-hero .lede{font-size:16px}
  body,.intro,.den-copy p,.events p,.stt-copy>p,.side>p,.card p,.host p,.ev p,.seat p,details p,.doc p,.doc li,main li{font-size:15px}
  .card,.day,.events,.stt,.ev{padding-left:18px;padding-right:18px}
  .syl{padding-left:16px;padding-right:16px}
  .community .intro,.den .intro{font-size:16px}
}

/* social icons in every footer (v7, 2026-10-20) */
.social{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:14px 0 6px}.social .lbl-f{flex:1 0 100%;font:700 11px/1 var(--body,Inter,Arial,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#AAB8CA;margin:0 0 6px}.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:#F4F7FB;transition:color .15s,background-color .15s}.social a:hover,.social a:focus-visible{color:#08C8F8;background:rgba(8,200,248,.10)}.social svg{width:22px;height:22px;fill:currentColor;display:block}
.hero .wrap.social-top{display:block;margin-bottom:28px}.social.top{margin:0;gap:2px}.social.top .lbl-f{flex:0 0 auto;margin:0 8px 0 0}
@media (max-width:760px){.hero .wrap.social-top{margin-bottom:20px}.social.top{justify-content:center}.social.top .lbl-f{flex:1 0 100%;text-align:center;margin:0 0 4px}}
.foot-bottom .social{margin-top:0}
.social .sg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px;margin-right:14px}.social .sgl{font:600 12px/1 var(--body,Inter,Arial,sans-serif);color:#5AA9F0;margin-right:4px;white-space:nowrap}
@media (max-width:760px){.social.top .sg{justify-content:center;margin-right:0}.social .sg{margin-right:0}}
@media (max-width:420px){.social a{width:40px;height:44px}.social .sgl{flex:1 0 100%;margin:4px 0 2px}.social.top .sgl{text-align:center}}
/* end social icons */