/* ==========================================================================
   footer.css — styles your provided <footer class="site-footer"> structure
   ========================================================================== */

   .site-footer{
    margin-top: var(--sp-7);
    border-top: 1px solid var(--ink-12);
    background: var(--bg);
    padding: var(--sp-6) 0 var(--sp-4) 0;
  }
  
  /* Logo centered */
  .footer-logo{
    display:flex;
    justify-content:center;
    padding: 0 var(--gutter) var(--sp-4) var(--gutter);
  }
  .footer-logo img{
    height: 2.6rem;
    width: auto;
    object-fit: contain;
  }
  
  /* Columns */
  .footer-inner{
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display:grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: var(--sp-4);
    align-items:start;
  }
  
  /* Column titles: “extremely simple” */
  .footer-column h4{
    margin: 0 0 var(--sp-1) 0;
    font-size: var(--fs-0);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-72);
    font-weight: 680;
  }
  
  .footer-column ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap: 0.35rem;
  }
  
  .footer-column li{
    color: var(--ink-90);
    font-size: var(--fs-0);
  }
  
  .footer-column a{
    color: var(--text);
    padding: 0.25rem 0;
    border-radius: 0.4rem;
    display:inline-block;
  }
  .footer-column a:hover{
    text-decoration: underline;
  }
  
  /* Bottom */
  .footer-bottom{
    max-width: var(--container);
    margin: var(--sp-5) auto 0 auto;
    padding: var(--sp-3) var(--gutter) 0 var(--gutter);
    border-top: 1px solid var(--ink-12);
    display:flex;
    flex-wrap:wrap;
    gap: var(--sp-1);
    justify-content:space-between;
  }
  .footer-bottom p{
    margin:0;
    font-size: var(--fs-0);
    color: var(--ink-60);
  }
  
  /* Responsive */
  @media (max-width: 64rem){
    .footer-inner{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  }
  @media (max-width: 48rem){
    .footer-inner{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); }
    .footer-bottom{ flex-direction:column; align-items:flex-start; }
  }
  @media (max-width: 30rem){
    .footer-inner{ grid-template-columns: 1fr; }
  }