/* ---------- footer ----------
   XL-L / 1200px+ base styles (Figma node 191:472), overridden for M,
   S and XS below.

   Reuses the standard 12-col grid (.container/.grid/.col-* from
   grid.css).

   XL-L, frame 1760px, margin 80 / gutter 20:
     row 1 — brand (logo + tagline)  col 1–3
             sitemap list            col 10 (single column, text fits)
             email list              col 11–12
     row 2 — copyright               col 1–2

   M, frame 900px (= 980 viewport − 2×40 margin), gutter 20:
     row 1 — brand (logo + tagline)  col 1–4
             sitemap list            col 8–9
             email list              col 10–12
     row 2 — copyright               col 1–4

   S, frame 560px (= 640 viewport − 2×40 margin), gutter 20, node
   332:663 — also shrinks type (16/20→12/14 body, 20→16 list titles)
   and padding (py 80→40):
     row 1 — brand (logo + tagline)  col 1–5
             sitemap list            col 6–8
             email list              col 9–12
     row 2 — copyright               col 1–12 (full width)

   XS, frame 312px (= 360 viewport − 2×24 margin), gutter 16, node
   332:893 — 4 full-width rows stacked (brand, sitemap, email,
   copyright), py 20, row-gap 20. Sitemap links wrap into a 2-column
   flex grid (Homepage/Works, Experiments/About) instead of the
   single column used at every larger tier. List titles 14/16,
   tracking 0.56px; body/link text stays 12/14 as in S.

   The logo mark reuses the same K wordmark already inlined for
   .menu-logo (roll-face-default) rather than a separate exported
   asset, so both stay in sync and only exist as one SVG in the repo. */

.footer-grid{
  grid-template-rows: repeat(2, auto);
  row-gap: 12px;
  padding: 80px 0;
  /* divider sits on the grid itself (inset by --grid-margin on both
     sides via .container's padding), not edge to edge on .footer */
  border-top: 1px solid var(--footer-border);
}

.footer-brand{
  grid-column: 1 / span 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-logo{
  display: block;
  width: 128px;
  height: 82px;
  color: var(--color-body-text);
}

.footer-tagline{
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-body-text);
}

.footer-list{
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-list--sitemap{ grid-column: 10; }
.footer-list--email{ grid-column: 11 / span 2; }

.footer-list-title{
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  letter-spacing: 0.8px;
  color: var(--color-body-text);
}

.footer-list-link{
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-body-text);
  text-decoration: none;
  white-space: nowrap;
  transform: translateX(0);
  /* same "Gentle" spring curve as the menu's nav/social hover nudge
     (--menu-item-hover-ease), just at this interaction's own 300ms */
  transition: transform var(--footer-link-hover-duration) var(--menu-item-hover-ease);
}
.footer-list-link:hover,
.footer-list-link:focus-visible{
  transform: translateX(12px);
}

.footer-copyright{
  grid-column: 1 / span 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-body-text);
}

/* M tier: 980–1199px (Figma node 327:528) — boundary matches the S/M
   split called out in variables.css, not merged with S. */
@media (min-width: 980px) and (max-width: 1199px){
  .footer-brand{ grid-column: 1 / span 4; }
  .footer-logo{ width: 57px; height: 37px; }
  .footer-list--sitemap{ grid-column: 8 / span 2; }
  .footer-list--email{ grid-column: 10 / span 3; }
  .footer-copyright{ grid-column: 1 / span 4; }
}

/* S tier: 640–979px (Figma node 332:663) */
@media (min-width: 640px) and (max-width: 979px){
  .footer-grid{ padding: 40px 0; }
  .footer-brand{ grid-column: 1 / span 5; }
  .footer-logo{ width: 48px; height: 31px; }
  .footer-tagline{ font-size: 12px; line-height: 14px; }
  .footer-list--sitemap{ grid-column: 6 / span 3; }
  .footer-list--email{ grid-column: 9 / span 4; }
  .footer-list-title{ font-size: 16px; letter-spacing: 0.64px; }
  .footer-list-link{ font-size: 12px; line-height: 14px; }
  .footer-copyright{ grid-column: 1 / span 12; font-size: 12px; line-height: 14px; }
}

/* XS tier: 360–639px (Figma node 332:893) — 4 stacked full-width
   rows; DOM order (brand, sitemap, email, copyright) already matches,
   so this only needs grid-column/-row resets, not reordering. */
@media (max-width: 639px){
  .footer-grid{
    grid-template-rows: none;
    row-gap: 20px;
    padding: 20px 0;
  }
  .footer-brand,
  .footer-list--sitemap,
  .footer-list--email,
  .footer-copyright{
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .footer-logo{ width: 48px; height: 31px; }
  .footer-tagline{ font-size: 12px; line-height: 14px; }
  .footer-list-title{ font-size: 14px; line-height: 16px; letter-spacing: 0.56px; }
  .footer-list-link{ font-size: 12px; line-height: 14px; }
  .footer-copyright{ font-size: 12px; line-height: 14px; }

  /* sitemap only: 2-column wrap instead of the single column used
     everywhere else */
  .footer-list--sitemap{
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 16px;
  }
  .footer-list--sitemap .footer-list-title{
    flex: 0 0 100%;
  }
  .footer-list--sitemap .footer-list-link{
    flex: 0 0 calc(50% - 8px);
  }
}