/* ─────────────────────────────────────────────
   MySpace NYC — public.css
   Shared chrome for the PUBLIC-FACING pages
   (landing, search, building, apply, our-team,
   careers, list-with-us, login, signup).

   Load order on every public page:
     1. tokens.css   — design system (variables, fonts)
     2. public.css   — THIS file: shared nav/footer/buttons/cards/hero
     3. pages/<name>.css — page-specific leftovers only

   Built entirely on the EDITORIAL token set (Cormorant
   Garamond + Montserrat, cream, muted gold #a08830).
   The legacy navy/Poppins look is being retired from the
   public surface — do not reintroduce it here.

   Migration in progress (2026-06): shared chrome is being
   lifted out of each page's inline <style> into this file,
   one page at a time. Until a page is migrated its rules
   still live in pages/<name>.css; once common patterns
   repeat across pages they graduate up to here.
   ───────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   Canonical site footer  —  <footer class="site-footer"> … </footer>
   ───────────────────────────────────────────────────────────
   The shared editorial footer, lifted from the careers page (the
   proven model). NEW class name (.site-footer) so adopting it is
   opt-in and collides with nothing today. Pages migrate their
   bespoke footers onto this markup in a follow-up pass:

     <footer class="site-footer">
       <div class="sf-inner">
         <div>
           <div class="sf-brand"><span class="sf-seal"></span>
             <span class="sf-wm">MYSPACE <span>NYC</span></span></div>
           <p class="sf-blurb">…</p>
           <div class="sf-contact"><a href="mailto:…">…</a></div>
         </div>
         <div class="sf-col"><h4>Rent</h4><a href="/search">…</a></div>
         …
       </div>
       <div class="sf-base"><span>© MySpace NYC</span><span>…</span></div>
     </footer>
   ═══════════════════════════════════════════════════════════ */
.site-footer {
    background: var(--ed-ink, #1a1a1a);
    color: var(--ed-cream-dark, #c8b896);
    padding: 52px 32px 30px;
}
.site-footer .sf-inner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 40px;
}
.site-footer .sf-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.site-footer .sf-seal {
    display: inline-block;
    width: 34px;
    height: 34px;
    background-color: var(--ed-gold, #a08830);
    -webkit-mask: url(/img/brand/MySpaceNYC-Logo-forest-512px.png) center / contain no-repeat;
            mask: url(/img/brand/MySpaceNYC-Logo-forest-512px.png) center / contain no-repeat;
}
.site-footer .sf-wm {
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ed-bg, #f5f0e8);
    font-weight: 600;
}
.site-footer .sf-wm span {
    color: var(--ed-gold, #a08830);
    letter-spacing: 0.16em;
}
.site-footer .sf-blurb {
    font-size: 0.78rem;
    color: var(--ed-cream-dark, #c8b896);
    line-height: 1.7;
    font-weight: 300;
    max-width: 280px;
    margin: 0;
}
.site-footer .sf-contact {
    font-size: 0.72rem;
    color: var(--ed-cream-dark, #c8b896);
    margin-top: 18px;
    line-height: 1.8;
}
.site-footer .sf-contact a {
    display: block;
    color: var(--ed-gold, #a08830);
}
.site-footer .sf-col h4 {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ed-gold, #a08830);
    font-weight: 600;
    margin: 0 0 14px;
}
.site-footer .sf-col a {
    display: block;
    font-size: 0.78rem;
    color: var(--ed-cream-dark, #c8b896);
    padding: 5px 0;
    font-weight: 300;
}
.site-footer .sf-col a:hover {
    color: var(--ed-gold, #a08830);
}
.site-footer .sf-base {
    max-width: 1500px;
    margin: 36px auto 0;
    padding-top: 22px;
    border-top: 0.5px solid rgba(232, 220, 192, 0.18);
    display: flex;
    justify-content: space-between;
    font-size: 0.64rem;
    color: var(--ed-cream-dark, #c8b896);
    letter-spacing: 0.1em;
}
@media (max-width: 960px) {
    .site-footer .sf-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 760px) {
    .site-footer { padding: 36px 18px 20px; }
    .site-footer .sf-inner { grid-template-columns: 1fr; gap: 24px; }
    .site-footer .sf-base { flex-direction: column; gap: 8px; text-align: center; }
}