/* ============================================================
   Zeybek site footer, the single source of truth.

   The pages live in four different CSS worlds: index / sustainability /
   portfolio-3d / 404 are fully inline, portfolio/* uses _shared.css, and
   everything else uses pages.css. Each used to carry its own footer, which
   is why three visibly different ones had drifted apart. This file is linked
   last on every page so one rule set wins everywhere.

   Self-contained by design: --line is only ever declared in index.html, so
   the border colour is scoped here rather than assumed. Every other token
   (--bone, --ash, --amber, --f-display, --f-body) is defined in all worlds.
   ============================================================ */
.site-footer{
  --f-line:rgba(238,232,220,0.09);
  border-top:1px solid var(--f-line);
  padding:clamp(50px,6vw,84px) 0 clamp(28px,3vw,44px);
}
.site-footer .f-grid{display:grid;grid-template-columns:1fr;gap:36px;}
@media (min-width:820px){
  .site-footer .f-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px;}
}
.site-footer .f-brand .logo{font-family:var(--f-display);font-size:26px;font-weight:400;letter-spacing:-0.02em;color:var(--bone);}
.site-footer .f-brand .logo em{font-style:italic;color:var(--amber);}
.site-footer .f-brand p{color:var(--ash);font-size:14px;max-width:30ch;margin:12px 0 18px;line-height:1.6;}
.site-footer .f-cta{display:inline-block;font-family:var(--f-body);font-weight:600;font-size:13px;color:var(--amber);letter-spacing:0.04em;}
.site-footer .f-col h4{font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--ash);margin:0 0 14px;}
.site-footer .f-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.site-footer .f-col a{font-size:14px;color:var(--bone-dim);transition:color .25s;}
.site-footer .f-col a:hover{color:var(--amber);}
.site-footer .f-word{font-family:var(--f-display);font-weight:320;font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1;font-size:clamp(88px,16.5vw,300px);line-height:0.85;text-align:center;letter-spacing:-0.035em;color:var(--bone);margin:clamp(40px,6vw,90px) 0 clamp(10px,2vw,26px);}
.site-footer .f-word span{color:var(--amber);}
.site-footer .f-creds{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-family:var(--f-body);font-size:12px;letter-spacing:0.04em;color:var(--ash);padding:22px 0;margin-top:34px;border-top:1px solid var(--f-line);}
.site-footer .f-creds .k{color:var(--bone-dim);}
.site-footer .f-creds .sep{color:var(--steel);}
.site-footer .f-creds a{color:var(--ash);transition:color .25s;}
.site-footer .f-creds a:hover{color:var(--amber);}
.site-footer .f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:18px;font-family:var(--f-body);font-size:12.5px;color:var(--steel);}
.site-footer .f-bottom a{color:var(--ash);transition:color .25s;}
.site-footer .f-bottom a:hover{color:var(--amber);}

/* ---------------------------------------------------------------------
   Mobile: real tap targets. The link rows were only 17px tall, well under
   the 44pt minimum, which made them easy to mis-tap. Rows now carry their
   own height so the list gap can drop to zero and stay visually tight.
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .site-footer .f-grid{gap:26px;}
  .site-footer .f-col ul{gap:0;}
  .site-footer .f-col a{display:flex;align-items:center;min-height:44px;font-size:15px;}
  .site-footer .f-creds{gap:4px 14px;padding:16px 0;margin-top:26px;}
  .site-footer .f-creds a{display:inline-flex;align-items:center;min-height:34px;}
  .site-footer .f-bottom a{display:inline-flex;align-items:center;min-height:34px;}
  .site-footer .f-credit a{display:inline-block;padding:6px 0;}
}
.site-footer .f-credit{text-align:center;margin-top:16px;font-family:var(--f-body);font-size:11px;letter-spacing:0.02em;color:var(--steel);}
.site-footer .f-credit a{color:var(--steel);transition:color .25s;}
.site-footer .f-credit a:hover{color:var(--amber);}