/* still yes — site footer
   Bean-Black footer used on every page. Sits below the contact form (#cta).
   Three rows:
     1. Instagram feed strip (last posts — see shared/footer.html for Claude
        Code integration notes)
     2. Brand + nav columns (4-col grid)
     3. Legal line (copyright + Impressum/Datenschutz)
*/

.site-footer{
  background:var(--ink-800);
  color:var(--on-paper);
  padding:96px 32px 40px;
}
.site-footer .inner{
  max-width:1320px;
  margin:0 auto;
}

/* ─── Instagram feed strip ─── */
.site-footer .ig-feed{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  padding-bottom:80px;
  margin-bottom:80px;
  border-bottom:1px solid rgba(253,249,244,.14);
}
.site-footer .ig-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.site-footer .ig-head .ig-eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(253,249,244,.6);
  margin:0 0 16px;
  display:block;
}
.site-footer .ig-head h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(28px,3vw,42px);
  line-height:1.1;
  color:#FDF9F4;
  margin:0;
  letter-spacing:-.01em;
}
.site-footer .ig-head h3 i{
  font-style:italic;
  color:var(--accent);
}
.site-footer .ig-follow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  color:#FDF9F4;
  text-decoration:none;
  padding:12px 20px;
  border:1px solid rgba(253,249,244,.3);
  border-radius:999px;
  transition:background .2s,border-color .2s,color .2s;
}
.site-footer .ig-follow:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#FDF9F4;
}
.site-footer .ig-follow .handle{
  color:rgba(253,249,244,.6);
}
.site-footer .ig-follow:hover .handle{
  color:rgba(253,249,244,.85);
}

.site-footer .ig-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}
.site-footer .ig-grid a{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:var(--r-sm);
  background:var(--ink-700);
}
.site-footer .ig-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease, opacity .2s ease;
  opacity:.88;
}
.site-footer .ig-grid a:hover img{
  transform:scale(1.04);
  opacity:1;
}

/* ─── Nav columns ─── */
.site-footer .cols{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:64px;
}
.site-footer .brand-block .brand{
  font-family:var(--serif);
  font-size:32px;
  color:#FDF9F4;
  letter-spacing:-.01em;
  line-height:1;
  text-decoration:none;
}
.site-footer .brand-block .brand .dot{color:var(--accent)}
.site-footer .brand-block .tag{
  display:block;
  margin-top:12px;
  font-family:var(--hand-font);
  font-size:24px;
  color:var(--accent);
  transform:rotate(-2deg);
}
.site-footer .brand-block p{
  margin:24px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--on-paper-soft);
  max-width:36ch;
}
.site-footer .social{
  display:flex;
  gap:10px;
  margin-top:28px;
}
.site-footer .social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(253,249,244,.18);
  color:var(--on-paper-soft);
  text-decoration:none;
  transition:background .2s,border-color .2s,color .2s;
}
.site-footer .social a:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#FDF9F4;
}
.site-footer .social a svg{ width:18px; height:18px; display:block; }

.site-footer h4{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:rgba(253,249,244,.6);
  margin:0 0 16px;
}
.site-footer .col a{
  display:block;
  color:var(--on-paper-soft);
  text-decoration:none;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 0;
  transition:color .2s;
}
.site-footer .col a:hover{color:#FDF9F4}

/* ─── Legal ─── */
.site-footer .legal{
  max-width:1320px;
  margin:64px auto 0;
  padding-top:24px;
  border-top:1px solid rgba(253,249,244,.14);
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:rgba(253,249,244,.5);
  flex-wrap:wrap;
  gap:12px;
}
.site-footer .legal a{
  color:inherit;
  text-decoration:none;
  margin-left:18px;
  transition:color .2s;
}
.site-footer .legal a:hover{color:#FDF9F4}

@media (max-width:900px){
  .site-footer{padding:72px 20px 32px}
  .site-footer .ig-feed{padding-bottom:56px;margin-bottom:56px;gap:24px}
  .site-footer .ig-grid{grid-template-columns:repeat(3,1fr)}
  .site-footer .cols{grid-template-columns:1fr 1fr;gap:40px}
  .site-footer .brand-block{grid-column:1 / -1}
}